Add indeterminate state; closes #274

docs/components/progress-bar.md

@@ -2,7 +2,7 @@
 
 [component-header:sl-progress-bar]
 
-Progress bars are used to show the progress of a determinate operation.
+Progress bars are used to show the status of an ongoing operation.
 
 ```html preview
 <sl-progress-bar percentage="50"></sl-progress-bar>
@@ -49,4 +49,12 @@ Use the default slot to show a label.
 </script>
 ```
 
+### Indeterminate
+
+The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `percentage` is ignored and the label, if present, will not be shown.
+
+```html preview
+<sl-progress-bar indeterminate></sl-progress-bar>
+```
+
 [component-metadata:sl-progress-bar]

src/components.d.ts

@@ -810,6 +810,10 @@ export namespace Components {
     interface SlMenuLabel {
     }
     interface SlProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate": boolean;
         /**
           * The progress bar's percentage, 0 to 100.
          */

src/components/progress-bar/progress-bar.scss

@@ -31,3 +31,21 @@
   transition: 400ms width, 400ms background-color;
   user-select: none;
 }
+
+// Indeterminate
+.progress-bar--indeterminate .progress-bar__indicator {
+  position: absolute;
+  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+  }
+  75%,
+  100% {
+    left: 100%;
+    width: 50%;
+  }
+}

src/components/progress-bar/progress-bar.tsx

@@ -20,15 +20,21 @@ export class ProgressBar {
   /** The progress bar's percentage, 0 to 100. */
   @Prop() percentage = 0;
 
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  @Prop() indeterminate = false;
+
   render() {
     return (
       <div
         part="base"
-        class="progress-bar"
+        class={{
+          'progress-bar': true,
+          'progress-bar--indeterminate': this.indeterminate
+        }}
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow={this.percentage}
+        aria-valuenow={this.indeterminate ? null : this.percentage}
       >
         <div
           part="indicator"
@@ -37,9 +43,11 @@ export class ProgressBar {
             width: `${this.percentage}%`
           }}
         >
-          <span part="label" class="progress-bar__label">
-            <slot />
-          </span>
+          {!this.indeterminate && (
+            <span part="label" class="progress-bar__label">
+              <slot />
+            </span>
+          )}
         </div>
       </div>
     );