Add indeterminate mode

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);
     }
   }