@reliability-design/web 1.0.2

package/dist/components/rel-progress/rel-progress.ts

@@ -0,0 +1,182 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type ProgressMode =
+  | "linear-determinate"
+  | "linear-indeterminate"
+  | "circular-determinate"
+  | "circular-indeterminate";
+
+@customElement("rel-progress")
+export class RelProgress extends LitElement {
+  @property({ type: String }) mode: ProgressMode = "linear-determinate";
+
+  @property({ type: Number }) value: number = 0;
+
+  private radius = 15.9155;
+  private circumference = 2 * Math.PI * this.radius;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    :host([mode*="circular"]) {
+      display: inline-block;
+    }
+
+    /* Linear Progress */
+    .linear-track {
+      background: var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      height: 6px;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .linear-bar {
+      background: var(--rel-colors-black);
+      height: 100%;
+      transition: width 0.3s ease;
+    }
+
+    .linear-bar.indeterminate {
+      width: 30%;
+      animation: linear-indeterminate 1.5s infinite;
+    }
+
+    @keyframes linear-indeterminate {
+      0% {
+        margin-left: -30%;
+      }
+      50% {
+        margin-left: 50%;
+      }
+      100% {
+        margin-left: 100%;
+      }
+    }
+
+    /* Circular Progress */
+    .circular {
+      display: inline-block;
+      width: 48px;
+      height: 48px;
+    }
+
+    .circular-svg {
+      transform: rotate(-90deg);
+      width: 100%;
+      height: 100%;
+    }
+
+    .circular-bg {
+      fill: none;
+      stroke: var(--rel-colors-gray-border);
+      stroke-width: 3;
+    }
+
+    .circular-progress {
+      fill: none;
+      stroke: var(--rel-colors-black);
+      stroke-width: 3;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.35s;
+      transform: rotate(0deg);
+      transform-origin: center;
+    }
+
+    /* Circular Indeterminate Spinner */
+    .spinner {
+      animation: rotate 2s linear infinite;
+    }
+
+    .spinner-path {
+      stroke: var(--rel-colors-black);
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  `;
+
+  private renderLinearDeterminate() {
+    return html`
+      <div class="linear-track">
+        <div class="linear-bar" style="width: ${this.value}%"></div>
+      </div>
+    `;
+  }
+
+  private renderLinearIndeterminate() {
+    return html`
+      <div class="linear-track">
+        <div class="linear-bar indeterminate"></div>
+      </div>
+    `;
+  }
+
+  private renderCircularDeterminate() {
+    const offset = this.circumference - (this.value / 100) * this.circumference;
+
+    return html`
+      <div class="circular">
+        <svg viewBox="0 0 36 36" class="circular-svg">
+          <circle class="circular-bg" cx="18" cy="18" r="15.9155" />
+          <circle
+            class="circular-progress"
+            cx="18"
+            cy="18"
+            r="15.9155"
+            stroke-dasharray="${this.circumference}"
+            stroke-dashoffset="${offset}" />
+        </svg>
+      </div>
+    `;
+  }
+
+  private renderCircularIndeterminate() {
+    return html`
+      <div class="circular">
+        <svg viewBox="0 0 50 50" class="spinner">
+          <circle class="spinner-path" cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+        </svg>
+      </div>
+    `;
+  }
+
+  render() {
+    switch (this.mode) {
+      case "linear-determinate":
+        return this.renderLinearDeterminate();
+      case "linear-indeterminate":
+        return this.renderLinearIndeterminate();
+      case "circular-determinate":
+        return this.renderCircularDeterminate();
+      case "circular-indeterminate":
+        return this.renderCircularIndeterminate();
+      default:
+        return this.renderLinearDeterminate();
+    }
+  }
+}