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
+
+
+
+
+
+```
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 {
`;
}
-
+
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);
}
}