Add indeterminate mode

README.md

@@ -18,4 +18,15 @@ npm i @tp/tp-progress-bar
 
 | Property | Type | Description |
 | -------- | ---- | ----------- |
-| `progress` | `Number` | The current progress of the progress bar.
+| `progress` | `Number` | The current progress of the progress bar (0-100). Ignored when `indeterminate` is set. |
+| `indeterminate` | `Boolean` | When set, shows an animated indicator that travels back and forth continuously. Use for operations whose progress can't be determined. |
+
+## Usage
+
+```html
+<!-- Determinate -->
+<tp-progress-bar progress="50"></tp-progress-bar>
+
+<!-- Indeterminate -->
+<tp-progress-bar indeterminate></tp-progress-bar>
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-progress-bar",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-progress-bar.js",
   "scripts": {

tp-progress-bar.js

@@ -15,9 +15,8 @@ export class TpProgressBar extends LitElement {
 
       .bar {
         background: #EEEEEE;
-        border-radius: 8px;
-        height: var(--tp-progress-bar-height, 16px);
         border-radius: var(--tp-progress-bar-border-radius, 8px);
+        height: var(--tp-progress-bar-height, 16px);
         position: relative;
         overflow: hidden;
         transform: translate3d(0, 0, 0);
@@ -34,6 +33,29 @@ export class TpProgressBar extends LitElement {
         background: var(--tp-progress-bar-color, #039BE5);
         transition: transform 200ms linear;
       }
+
+      /* Indeterminate mode: a fixed-width indicator travels across the bar. */
+      :host([indeterminate]) #progress {
+        right: auto;
+        width: 40%;
+        transform: none;
+        transition: none;
+        animation: tp-progress-indeterminate 1.4s ease-in-out infinite;
+      }
+
+      @keyframes tp-progress-indeterminate {
+        0% {
+          left: -40%;
+        }
+
+        50% {
+          left: 100%;
+        }
+
+        100% {
+          left: -40%;
+        }
+      }
     `;
   }
 
@@ -44,20 +66,22 @@ export class TpProgressBar extends LitElement {
       </div>
     `;
   }
-  
+
   static get properties() {
     return {
       progress: { type: Number },
+      indeterminate: { type: Boolean, reflect: true },
     };
   }
 
   constructor() {
     super();
     this.progress = 0;
+    this.indeterminate = false;
   }
-  
+
   updated(changedProperties) {
-    if (changedProperties.has('progress')) {
+    if (changedProperties.has('progress') && !this.indeterminate) {
       this._progressChanged(this.progress);
     }
   }