--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -395,17 +395,16 @@ const DownloadsIndicatorView = {
     }
 
     if (this._percentComplete !== aValue) {
       this._percentComplete = aValue;
       this._refreshAttention();
 
       if (this._percentComplete >= 0) {
         this.indicator.setAttribute("progress", "true");
-        // For arrow type only:
         // We set animationDelay to a minus value (0s ~ -100s) to show the
         // corresponding frame needed for progress.
         this._progressIcon.style.animationDelay = (-this._percentComplete) + "s";
       } else {
         this.indicator.removeAttribute("progress");
         this._progressIcon.style.animationDelay = "1s";
       }
     }

--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -16,29 +16,34 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
 #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill);
   width: 16px;
   height: 16px;
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%endif
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: var(--downloads-indicator-inprogress-image);
+}
+%endif
+
 toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
@@ -72,16 +77,18 @@ toolbar[brighttext] #downloads-button[cu
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
+/*** Download notifications ***/
+
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
 }

--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -1,47 +1,48 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../shared/downloads/indicator.inc.css
 
 /*** Status and progress indicator ***/
 
-#downloads-indicator-anchor {
-  min-width: 16px;
-  min-height: 16px;
-}
-
 #downloads-animation-container {
   min-height: 1px;
   min-width: 1px;
   height: 1px;
   margin-bottom: -1px;
   /* Makes the outermost animation container element positioned, so that its
      contents are rendered over the main browser window in the Z order.
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill);
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+%endif
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: var(--downloads-indicator-inprogress-image);
+}
+%endif
 toolbar[brighttext] #downloads-indicator-icon {
   fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-bar-animation.svg
@@ -0,0 +1,515 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="16">
+  <svg width="16" height="16">
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#a)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="16">
+    <defs>
+      <clipPath id="b">
+        <path fill="#fff" d="M2 14v2h.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#b)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="32">
+    <defs>
+      <clipPath id="c">
+        <path fill="#fff" d="M2 14v2h.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#c)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="48">
+    <defs>
+      <clipPath id="d">
+        <path fill="#fff" d="M2 14v2h.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#d)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="64">
+    <defs>
+      <clipPath id="e">
+        <path fill="#fff" d="M2 14v2h.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#e)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="80">
+    <defs>
+      <clipPath id="f">
+        <path fill="#fff" d="M2 14v2h1.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#f)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="96">
+    <defs>
+      <clipPath id="g">
+        <path fill="#fff" d="M2 14v2h1.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#g)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="112">
+    <defs>
+      <clipPath id="h">
+        <path fill="#fff" d="M2 14v2h1.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#h)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="128">
+    <defs>
+      <clipPath id="i">
+        <path fill="#fff" d="M2 14v2h1.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#i)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="144">
+    <defs>
+      <clipPath id="j">
+        <path fill="#fff" d="M2 14v2h2.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#j)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="160">
+    <defs>
+      <clipPath id="k">
+        <path fill="#fff" d="M2 14v2h2.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#k)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="176">
+    <defs>
+      <clipPath id="l">
+        <path fill="#fff" d="M2 14v2h2.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#l)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="192">
+    <defs>
+      <clipPath id="m">
+        <path fill="#fff" d="M2 14v2h2.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#m)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="208">
+    <defs>
+      <clipPath id="n">
+        <path fill="#fff" d="M2 14v2h3.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#n)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="224">
+    <defs>
+      <clipPath id="o">
+        <path fill="#fff" d="M2 14v2h3.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#o)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="240">
+    <defs>
+      <clipPath id="p">
+        <path fill="#fff" d="M2 14v2h3.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#p)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="256">
+    <defs>
+      <clipPath id="q">
+        <path fill="#fff" d="M2 14v2h3.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#q)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="272">
+    <defs>
+      <clipPath id="r">
+        <path fill="#fff" d="M2 14v2h4.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#r)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="288">
+    <defs>
+      <clipPath id="s">
+        <path fill="#fff" d="M2 14v2h4.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#s)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="304">
+    <defs>
+      <clipPath id="t">
+        <path fill="#fff" d="M2 14v2h4.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#t)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="320">
+    <defs>
+      <clipPath id="u">
+        <path fill="#fff" d="M2 14v2h4.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#u)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="336">
+    <defs>
+      <clipPath id="v">
+        <path fill="#fff" d="M2 14v2h5.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#v)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="352">
+    <defs>
+      <clipPath id="w">
+        <path fill="#fff" d="M2 14v2h5.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#w)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="368">
+    <defs>
+      <clipPath id="x">
+        <path fill="#fff" d="M2 14v2h5.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#x)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="384">
+    <defs>
+      <clipPath id="y">
+        <path fill="#fff" d="M2 14v2h5.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#y)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="400">
+    <defs>
+      <clipPath id="z">
+        <path fill="#fff" d="M2 14v2h6v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#z)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="416">
+    <defs>
+      <clipPath id="A">
+        <path fill="#fff" d="M2 14v2h6.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#A)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="432">
+    <defs>
+      <clipPath id="B">
+        <path fill="#fff" d="M2 14v2h6.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#B)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="448">
+    <defs>
+      <clipPath id="C">
+        <path fill="#fff" d="M2 14v2h6.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#C)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="464">
+    <defs>
+      <clipPath id="D">
+        <path fill="#fff" d="M2 14v2h6.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#D)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="480">
+    <defs>
+      <clipPath id="E">
+        <path fill="#fff" d="M2 14v2h7.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#E)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="496">
+    <defs>
+      <clipPath id="F">
+        <path fill="#fff" d="M2 14v2h7.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#F)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="512">
+    <defs>
+      <clipPath id="G">
+        <path fill="#fff" d="M2 14v2h7.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#G)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="528">
+    <defs>
+      <clipPath id="H">
+        <path fill="#fff" d="M2 14v2h7.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#H)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="544">
+    <defs>
+      <clipPath id="I">
+        <path fill="#fff" d="M2 14v2h8.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#I)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="560">
+    <defs>
+      <clipPath id="J">
+        <path fill="#fff" d="M2 14v2h8.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#J)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="576">
+    <defs>
+      <clipPath id="K">
+        <path fill="#fff" d="M2 14v2h8.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#K)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="592">
+    <defs>
+      <clipPath id="L">
+        <path fill="#fff" d="M2 14v2h8.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#L)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="608">
+    <defs>
+      <clipPath id="M">
+        <path fill="#fff" d="M2 14v2h9.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#M)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="624">
+    <defs>
+      <clipPath id="N">
+        <path fill="#fff" d="M2 14v2h9.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#N)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="640">
+    <defs>
+      <clipPath id="O">
+        <path fill="#fff" d="M2 14v2h9.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#O)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="656">
+    <defs>
+      <clipPath id="P">
+        <path fill="#fff" d="M2 14v2h9.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#P)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="672">
+    <defs>
+      <clipPath id="Q">
+        <path fill="#fff" d="M2 14v2h10.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#Q)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="688">
+    <defs>
+      <clipPath id="R">
+        <path fill="#fff" d="M2 14v2h10.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#R)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="704">
+    <defs>
+      <clipPath id="S">
+        <path fill="#fff" d="M2 14v2h10.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#S)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="720">
+    <defs>
+      <clipPath id="T">
+        <path fill="#fff" d="M2 14v2h10.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#T)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="736">
+    <defs>
+      <clipPath id="U">
+        <path fill="#fff" d="M2 14v2h11.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#U)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="752">
+    <defs>
+      <clipPath id="V">
+        <path fill="#fff" d="M2 14v2h11.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#V)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="768">
+    <defs>
+      <clipPath id="W">
+        <path fill="#fff" d="M2 14v2h11.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#W)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="784">
+    <defs>
+      <clipPath id="X">
+        <path fill="#fff" d="M2 14v2h11.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#X)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="16" x="800">
+    <defs>
+      <clipPath id="Y">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#Y)">
+      <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+</svg>

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,12 +1,66 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+#downloads-indicator-anchor {
+  min-width: 16px;
+  min-height: 16px;
+}
+
+#downloads-button {
+%ifdef MOZ_PHOTON_ANIMATIONS
+  --downloads-indicator-image: url("chrome://browser/skin/download-arrow.svg");
+  --downloads-indicator-inprogress-image:
+      url("chrome://browser/skin/download-arrow-progress-dimmed.svg")
+%else
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
+%endif
+}
+
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-indicator-progress-icon {
+  min-width: 800px;
+  height: 16px;
+  background: url("chrome://browser/skin/downloads/download-bar-animation.svg") 0 0 no-repeat;
+  transform: translateX(0px);
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  /* From javascript side we use animation delay from 0s to -100s to show
+   * corresponding frames needed for progress.
+   * animation-delay is set to a positive value to make nothing shown.
+   */
+  animation-play-state: paused;
+  animation-delay: 1s;
+  animation-duration: 101s;
+  animation-timing-function: steps(50);
+  animation-name: indicatorProgressBar;
+}
+
+toolbar[brighttext] #downloads-indicator-progress-icon {
+  animation-name: indicatorProgressBarDark;
+}
+
+@keyframes indicatorProgressBar {
+  from  { transform: translateX(0); }
+  to    { transform: translateX(-800px); }
+}
+@keyframes indicatorProgressBarDark {
+  0% {
+    transform: translateX(0);
+    filter: brightness(0.7);
+  }
+  100% {
+    transform: translateX(-800px);
+    filter: brightness(1);
+  }
+}
+%else
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image) bottom no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 16px;
   margin-top: 16px;
   /* From javascript side we use animation delay from 0s to -100s to show
    * corresponding frames needed for progress.
@@ -62,8 +116,9 @@ toolbar[brighttext] #downloads-indicator
   50% {
     transform: translateY(-3px);
     animation-timing-function: ease-in;
   }
   100% {
     transform: translateY(0);
   }
 }
+%endif

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/download-arrow-progress-dimmed.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <svg width="16" height="16">
+    <path d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z" opacity=".3"/>
+    <path d="M7.293 12.725a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.413L9 9.605V1.019a1 1 0 0 0-2 0v8.586L3.707 6.312a1 1 0 0 0-1.414 1.413l5 5z"/>
+  </svg>
+</svg>

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/download-arrow.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M7.293 12.707a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.414L9 9.586V1a1 1 0 1 0-2 0v8.586L3.707 6.293a1 1 0 0 0-1.414 1.414zM13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+</svg>

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -48,16 +48,17 @@
   skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png  (../shared/customizableui/subView-arrow-back-inverted@2x.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png  (../shared/customizableui/subView-arrow-back-inverted-rtl.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png  (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
   skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
   skin/classic/browser/customizableui/whimsy@2x.png            (../shared/customizableui/whimsy@2x.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
   skin/classic/browser/downloads/download-blocked.svg          (../shared/downloads/download-blocked.svg)
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
+  skin/classic/browser/downloads/download-bar-animation.svg    (../shared/downloads/download-bar-animation.svg)
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/heartbeat-icon.svg                      (../shared/heartbeat-icon.svg)
   skin/classic/browser/heartbeat-star-lit.svg                  (../shared/heartbeat-star-lit.svg)
   skin/classic/browser/heartbeat-star-off.svg                  (../shared/heartbeat-star-off.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
@@ -109,16 +110,18 @@
   skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
   skin/classic/browser/check.svg                      (../shared/icons/check.svg)
   skin/classic/browser/containers.svg                 (../shared/icons/containers.svg)
   skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
   skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
   skin/classic/browser/device-mobile.svg              (../shared/icons/device-mobile.svg)
   skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
   skin/classic/browser/download.svg                   (../shared/icons/download.svg)
+  skin/classic/browser/download-arrow-progress-dimmed.svg  (../shared/icons/download-arrow-progress-dimmed.svg)
+  skin/classic/browser/download-arrow.svg             (../shared/icons/download-arrow.svg)
   skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
   skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
   skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
   skin/classic/browser/email-link.svg                 (../shared/icons/email-link.svg)
   skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
   skin/classic/browser/find.svg                       (../shared/icons/find.svg)
   skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
   skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)

--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -66,17 +66,21 @@ toolbar:not([brighttext]) #bookmarks-men
   list-style-image: url("chrome://browser/skin/bookmarksMenu.svg");
 }
 
 #history-panelmenu[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/history.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] {
+%ifdef MOZ_PHOTON_ANIMATIONS
+  list-style-image: url("chrome://browser/skin/download-arrow.svg");
+%else
   list-style-image: url("chrome://browser/skin/download.svg");
+%endif
 }
 
 #add-ons-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/addons.svg");
 }
 
 #open-file-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/open.svg");

--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -16,30 +16,35 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill);
   width: 16px;
   height: 16px;
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%endif
 }
 
-toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: var(--downloads-indicator-inprogress-image);
+}
+%endif
+
+toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
   width: 8px;