diff --git a/docs/src/pages/components/ProgressIndicator.svx b/docs/src/pages/components/ProgressIndicator.svx
index 02a78895..0c0b0ba0 100644
--- a/docs/src/pages/components/ProgressIndicator.svx
+++ b/docs/src/pages/components/ProgressIndicator.svx
@@ -56,4 +56,4 @@
 
 ### Skeleton
 
-<ProgressIndicatorSkeleton />
\ No newline at end of file
+<ProgressIndicatorSkeleton count={3} />
\ No newline at end of file
diff --git a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
index 32fab922..3bddc879 100644
--- a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
@@ -4,6 +4,12 @@
    * @type {boolean} [vertical=false]
    */
   export let vertical = false;
+
+  /**
+   * Specify the number of steps to render
+   * @type {number} [count=4]
+   */
+  export let count = 4;
 </script>
 
 <ul
@@ -16,7 +22,7 @@
   on:mouseenter
   on:mouseleave
 >
-  {#each [0, 1, 2, 3] as item, i (item)}
+  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
     <li
       class:bx--progress-step="{true}"
       class:bx--progress-step--incomplete="{true}"