diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
index b81cf599..7ed85752 100644
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@@ -21,4 +21,10 @@ The default `max` value is `100`.
 
 ### Hidden label
 
-<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
\ No newline at end of file
+<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### UX example
+
+This example shows how to animate the progress bar from 0 to 100% with start and end states.
+
+<FileSource src="/framed/ProgressBar/ProgressBarUx" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
index 83dd89b6..4f273214 100644
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@@ -1,30 +1,11 @@
 <script>
-  import { onMount } from "svelte";
-  import { ProgressBar } from "carbon-components-svelte";
+  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
 
   let max = 328;
   let value = 0;
-  let timer = undefined;
-
-  onMount(() => {
-    timer = setTimeout(() => {
-      const interval = setInterval(() => {
-        const delta = Math.random() * 10;
-
-        if (value + delta < max) {
-          value += delta;
-        } else {
-          value = max;
-          clearInterval(interval);
-        }
-      }, 20);
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  });
 
   $: helperText =
-    value > 0 ? `${value.toFixed(0)}MB of ${max}MB` : "Preparing upload...";
+    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
   $: if (value === max) helperText = "Done";
 </script>
 
@@ -34,3 +15,30 @@
   max="{max}"
   helperText="{helperText}"
 />
+
+<ButtonSet style="margin-top: var(--cds-spacing-08)">
+  <Button
+    disabled="{value > 0}"
+    on:click="{() => {
+      const interval = setInterval(() => {
+        const delta = Math.random() * 10;
+
+        if (value + delta < max) {
+          value += delta;
+        } else {
+          value = max;
+          clearInterval(interval);
+        }
+      }, 30);
+    }}"
+  >
+    Start
+  </Button>
+  <Button
+    kind="tertiary"
+    disabled="{value !== max}"
+    on:click="{() => (value = 0)}"
+  >
+    Reset
+  </Button>
+</ButtonSet>