diff --git a/ui/file_manager/file_manager/widgets/xf_pie_progress.ts b/ui/file_manager/file_manager/widgets/xf_pie_progress.ts
index a9583a3eecfc9..0632a861b977b 100644
--- a/ui/file_manager/file_manager/widgets/xf_pie_progress.ts
+++ b/ui/file_manager/file_manager/widgets/xf_pie_progress.ts
@@ -6,9 +6,6 @@ import {addCSSPrefixSelector} from '../common/js/dom_utils.js';
 
 import {css, customElement, html, property, svg, XfBase} from './xf_base.js';
 
-const TWO_PI = 2.0 * Math.PI;
-const HALF_PI = 0.5 * Math.PI;
-
 /**
  * Displays a pie shaped progress indicator.
  * Accepts a `progress` property ranging from 0 to 1.
@@ -22,20 +19,29 @@ export class XfPieProgress extends XfBase {
   private center = this.size / 2.0;  // Center of the pie circle (both X and Y).
   private radius = 5.4;              // Radius of the pie circle.
 
-  private outlineShape = svg`<circle
-    class="outline"
-    cx="${this.center}"
-    cy="${this.center}"
-    r="${this.center}"
-  />`;
-  private queuedShape = svg`<circle
+  private outlineShape = svg`
+    <circle
+      class="outline"
+      cx="${this.center}"
+      cy="${this.center}"
+      r="${this.center}"
+    />`;
+  private queuedShape = svg`
+    <circle
       class="queued"
+      stroke-width="1.6"
       cx="${this.center}"
       cy="${this.center}"
       r="5.6"
-      fill="none"
-      stroke-width="1.6"
-    />;`;
+    />`;
+  private edgeShape = svg`
+    <circle
+      class="edge"
+      stroke-width="2"
+      cx="${this.center}"
+      cy="${this.center}"
+      r="${this.radius}"
+    />`;
 
   static override get styles() {
     return getCSS();
@@ -44,59 +50,29 @@ export class XfPieProgress extends XfBase {
   override render() {
     const {progress, size, center, radius} = this;
 
-    let contents = svg``;
-
-    if (progress === 0) {
-      // Display the queued shape.
-      contents = this.queuedShape;
-    } else if (progress >= 0.99) {
-      // The completed pie is easier to draw.
-      contents = svg`
-        <circle
-          class="edge full"
-          stroke-width="2"
-          cx="${center}"
-          cy="${center}"
-          r="${radius}"
-        />
-      `;
-    } else {
-      // Finishing angle of the pie arc. Notice that the starting angle is
-      // always -PI/2. I.e., the pie is drawn starting from the top of the
-      // circle and it advances in a clockwise fashion.
-      const radians = TWO_PI * progress - HALF_PI;
-
-      // Finishing cartesian coordinates of the pie arc. Notice that the
-      // starting coordinates are always <0, -radius> (the top of the circle).
-      const x = center + radius * Math.cos(radians);
-      const y = center + radius * Math.sin(radians);
-
-      // Determines which arc fitting the other arguments should be rendered.
-      // Render the smaller one until we are drawing an arc with an angle
-      // greater than 180 degrees. More info:
-      // https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
-      const largeArcFlag = progress <= 0.5 ? '0' : '1';
-
-      contents = svg`<circle
-          class="edge"
-          stroke-width="2"
-          cx="${center}"
-          cy="${center}"
-          r="${radius}"
-        />
-        <path
-          class="pie"
-          d="
-    M ${center} ${center}
-    l 0 ${- radius}
-    A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x} ${y}
-    Z"
-        />`;
-    }
+    const isQueued = progress === 0;
+
+    // The progress pie is drawn as an arc with a thick stroke width (as thick
+    // as the radius of the pie).
+    const arcRadius = radius * 0.5;
+    const maxArcLength = 2.0 * Math.PI * arcRadius;
+    const pie = svg`
+      <circle class="pie"
+        stroke-width="${radius}"
+        stroke-dasharray="${maxArcLength}"
+        stroke-dashoffset="${maxArcLength * (1 - progress)}"
+        cx="${center}"
+        cy="${center}"
+        r="${arcRadius}"
+        transform="rotate(-90, ${center}, ${center})"
+        visibility="${isQueued ? 'hidden' : 'visible'}"
+      />`;
+
+    const edge = isQueued ? this.queuedShape : this.edgeShape;
 
     return html`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">
-        ${this.outlineShape} ${contents}
+        ${this.outlineShape} ${pie} ${edge}
       </svg>
     `;
   }
@@ -110,6 +86,7 @@ function getCSS() {
     }
 
     .queued {
+      fill: none;
       stroke: var(--cros-icon-color-secondary);
     }
 
@@ -118,17 +95,15 @@ function getCSS() {
       stroke: var(--cros-icon-color-prominent);
     }
 
-    .full {
-      fill: var(--cros-icon-color-prominent);
-    }
-
     .pie {
-      fill: var(--cros-icon-color-prominent);
-      stroke: none;
+      fill: none;
+      stroke: var(--cros-icon-color-prominent);
+      transition: stroke-dashoffset 1s ease-out;
     }
 
     .outline {
       fill: var(--xf-icon-color-outline, transparent);
+      stroke: none;
     }
   `;
 
@@ -139,6 +114,7 @@ function getCSS() {
     }
 
     .queued {
+      fill: none;
       stroke: currentColor
     }
 
@@ -147,17 +123,15 @@ function getCSS() {
       stroke: var(--cros-sys-progress);
     }
 
-    .full {
-      fill: var(--cros-sys-progress);
-    }
-
     .pie {
-      fill: var(--cros-sys-progress);
-      stroke: none;
+      fill: none;
+      stroke: var(--cros-sys-progress);
+      transition: stroke-dashoffset 1s ease-out;
     }
 
     .outline {
       fill: var(--xf-icon-color-outline, transparent);
+      stroke: none;
     }
   `;