✨ Add indeterminate progress bars

Author: Frontendland

src/blocks/Maintenance/maintenance.module.scss

@@ -27,7 +27,7 @@
     from {
         transform: rotate(0);
     }
-    to   {
+    to {
         transform: rotate(360deg);
     }
 }

src/components/Progress/Progress.astro

@@ -17,6 +17,7 @@ const {
     striped,
     stripeLight,
     stripeDark,
+    indeterminate,
     className
 } = Astro.props
 
@@ -25,6 +26,7 @@ const classes = [
     size && styles[size],
     striped && styles.striped,
     square && styles.square,
+    indeterminate && styles.indeterminate,
     className
 ]
 
@@ -34,10 +36,12 @@ const styleVariables = classNames([
     stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
     stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
 ])
+
+const currentValue = indeterminate && !value ? 20 : value
 ---
 
 <div class:list={classes} style={styleVariables}>
-    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
-        {label && `${value}%`}
+    <div class={styles.progress} style={`--w-progress-width: ${currentValue}%;`}>
+        {label && `${currentValue}%`}
     </div>
 </div>

src/components/Progress/Progress.svelte

@@ -15,6 +15,7 @@
         striped,
         stripeLight,
         stripeDark,
+        indeterminate,
         className
     }: ProgressProps = $props()
 
@@ -23,6 +24,7 @@
         size && styles[size],
         striped && styles.striped,
         square && styles.square,
+        indeterminate && styles.indeterminate,
         className
     ])
 
@@ -32,12 +34,14 @@
         stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
         stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
     ])
+
+    const currentValue = indeterminate && !value ? 20 : value
 </script>
 
 <div class={classes} style={styleVariables || null}>
-    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+    <div class={styles.progress} style={`--w-progress-width: ${currentValue}%;`}>
         {#if label}
-            {`${value}%`}
+            {`${currentValue}%`}
         {/if}
     </div>
 </div>

src/components/Progress/Progress.tsx

@@ -15,13 +15,15 @@ const Progress = ({
     striped,
     stripeLight,
     stripeDark,
+    indeterminate,
     className
 }: ProgressProps) => {
     const classes = classNames([
         styles['w-progress'],
         size && styles[size],
         striped && styles.striped,
         square && styles.square,
+        indeterminate && styles.indeterminate,
         className
     ])
 
@@ -32,14 +34,16 @@ const Progress = ({
         ...(stripeDark && { '--w-progress-stripe-dark': stripeDark })
     } as React.CSSProperties
 
+    const currentValue = indeterminate && !value ? 20 : value
+
     const percent = {
-        '--w-progress-width': `${value}%`
+        '--w-progress-width': `${currentValue}%`
     } as React.CSSProperties
 
     return (
         <div className={classes} style={styleVariables}>
             <div className={styles.progress} style={percent}>
-                {label && `${value}%`}
+                {label && `${currentValue}%`}
             </div>
         </div>
     )

src/components/Progress/progress.module.scss

@@ -58,6 +58,12 @@ body {
         }
     }
 
+    &.indeterminate .progress {
+        @include position(relative);
+
+        animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+    }
+
     .progress {
         @include transition(width);
         @include size('h100%');
@@ -68,3 +74,12 @@ body {
         width: var(--w-progress-width);
     }
 }
+
+@keyframes load {
+    from {
+        left: -100%;
+    }
+    to {
+        left: 100%;
+    }
+}

src/components/Progress/progress.ts

@@ -8,5 +8,6 @@ export type ProgressProps = {
     striped?: boolean
     stripeLight?: string
     stripeDark?: string
+    indeterminate?: boolean
     className?: string
 }

src/pages/components/progress.astro

@@ -148,6 +148,14 @@ const sections = getSections({
                 </p>
                 <section.component value={33} />
             </ComponentWrapper>
+
+            <ComponentWrapper title="Indeterminate">
+                <section.component indeterminate={true} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Indeterminate with value">
+                <section.component indeterminate={true} value={50} />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>