From 54d8ecbfd7796d0a43a1eca0092c870072f5e09f Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Wed, 5 Aug 2026 22:18:55 +0200
Subject: [PATCH] Add indeterminate mode

---
 README.md          | 13 ++++++++++++-
 package.json       |  2 +-
 tp-progress-bar.js | 34 +++++++++++++++++++++++++++++-----
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 041fcf7..b3f9b56 100644
--- a/README.md
+++ b/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>
+```
diff --git a/package.json b/package.json
index 7548e15..772232a 100644
--- a/package.json
+++ b/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": {
diff --git a/tp-progress-bar.js b/tp-progress-bar.js
index 36c9664..713ffce 100644
--- a/tp-progress-bar.js
+++ b/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);
     }
   }