feat: 🎸 render bg on progress spinner

ethlete-io · Jan 17, 2025 · d5cb19c · d5cb19c
1 parent 11941ba
commit d5cb19c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 2 deletions.
diff --git a/.changeset/big-flies-chew.md b/.changeset/big-flies-chew.md
@@ -0,0 +1,5 @@
+---
+'@ethlete/cdk': minor
+---
+
+Add option to render a progress spinner background circle
diff --git a/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.html b/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.html
@@ -47,6 +47,27 @@
   </svg>
 </div>
 
+@if (renderBackground) {
+  <div class="et-circular-progress__background-container" aria-hidden="true">
+    <svg
+      [attr.viewBox]="_viewBox()"
+      class="et-circular-progress__background-circle-graphic"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable="false"
+    >
+      <circle
+        [attr.r]="_circleRadius()"
+        [style.stroke-dasharray.px]="_strokeCircumference()"
+        [style.stroke-dashoffset.px]="_bgStrokeDashOffset()"
+        [style.stroke-width.%]="_circleStrokeWidth()"
+        class="et-circular-progress__background-circle"
+        cx="50%"
+        cy="50%"
+      />
+    </svg>
+  </div>
+}
+
 <div class="et-circular-progress__indeterminate-container" aria-hidden="true">
   <div [class.et-circular-progress__color-1]="multiColor" class="et-circular-progress__spinner-layer">
     <ng-container [ngTemplateOutlet]="spinner" />

diff --git a/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.scss b/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.scss
@@ -5,6 +5,8 @@
   --et-progress-spinner-color-2: #f44336;
   --et-progress-spinner-color-3: #ff9800;
   --et-progress-spinner-color-4: #4caf50;
+
+  --et-progress-spinner-background: #1e88e53c;
 }
 
 .et-progress-spinner {
@@ -28,6 +30,11 @@
   }
 }
 
+.et-circular-progress__background-circle {
+  stroke: var(--et-progress-spinner-background);
+  stroke-linecap: var(--et-progress-spinner-edges);
+}
+
 .et-circular-progress__determinate-circle,
 .et-circular-progress__indeterminate-circle-graphic {
   stroke: var(--et-progress-spinner-color);
@@ -53,6 +60,7 @@
 }
 
 .et-circular-progress__determinate-container,
+.et-circular-progress__background-container,
 .et-circular-progress__indeterminate-circle-graphic,
 .et-circular-progress__indeterminate-container,
 .et-circular-progress__spinner-layer {
@@ -61,7 +69,8 @@
   height: 100%;
 }
 
-.et-circular-progress__determinate-container {
+.et-circular-progress__determinate-container,
+.et-circular-progress__background-container {
   transform: rotate(-90deg);
 }
 
@@ -73,7 +82,8 @@
 }
 
 .et-circular-progress__determinate-circle-graphic,
-.et-circular-progress__indeterminate-circle-graphic {
+.et-circular-progress__indeterminate-circle-graphic,
+.et-circular-progress__background-circle-graphic {
   fill: rgba(0, 0, 0, 0);
 }
 

diff --git a/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.stories.ts b/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.stories.ts
@@ -22,12 +22,16 @@ export default {
     multiColor: {
       control: { type: 'boolean' },
     },
+    renderBackground: {
+      control: { type: 'boolean' },
+    },
   },
   args: {
     diameter: 100,
     strokeWidth: 10,
     mode: 'indeterminate',
     multiColor: false,
+    renderBackground: false,
   },
   parameters: {
     docs: {

diff --git a/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.ts b/libs/cdk/src/lib/components/progress-spinner/progress-spinner.component.ts
@@ -66,6 +66,9 @@ export class ProgressSpinnerComponent {
   mode: ProgressSpinnerMode =
     this._elementRef.nativeElement.nodeName.toLowerCase() === 'et-spinner' ? 'indeterminate' : 'determinate';
 
+  @Input({ transform: booleanAttribute })
+  renderBackground = false;
+
   @Input()
   get value(): number {
     return this.mode === 'determinate' ? this._value : 0;
@@ -122,4 +125,11 @@ export class ProgressSpinnerComponent {
   protected _circleStrokeWidth() {
     return (this.strokeWidth / this.diameter) * 100;
   }
+
+  protected _bgStrokeDashOffset() {
+    if (this.mode === 'determinate') {
+      return (this._strokeCircumference() * (100 - 100)) / 100;
+    }
+    return null;
+  }
 }