From 696c5dcb2a232e47728fde17fa44a317ca64a981 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 05:17:16 -0700
Subject: [PATCH] feat(progress-indicator-skeleton): add count prop

---
 docs/src/pages/components/ProgressIndicator.svx         | 2 +-
 src/ProgressIndicator/ProgressIndicator.Skeleton.svelte | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

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}"