making 'flash' progress bar dynamically fit its container

bullhorn · Jan 10, 2024 · a53bfb1 · a53bfb1
1 parent 1b60d63
commit a53bfb1
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 34 deletions.
diff --git a/projects/novo-elements/src/elements/progress/Progress.scss b/projects/novo-elements/src/elements/progress/Progress.scss
@@ -31,4 +31,8 @@
     width: 9.2em;
     height: 9.2em;
   }
+
+  &.fit-container {
+    width: 100%;
+  }
 }
diff --git a/projects/novo-elements/src/elements/progress/Progress.ts b/projects/novo-elements/src/elements/progress/Progress.ts
@@ -21,6 +21,9 @@ export class NovoProgressElement implements AfterContentInit {
   @Input() total: number = 100;
   @Input() radius: number = 54;
 
+  @HostBinding('class.fit-container')
+  fitContainer: boolean = false;
+
   @HostBinding('class.striped')
   @Input()
   striped: boolean = false;

diff --git a/projects/novo-elements/src/elements/progress/ProgressBar.scss b/projects/novo-elements/src/elements/progress/ProgressBar.scss
@@ -1,7 +1,6 @@
 @import "../../styles/variables";
 @import "../../styles/global/functions";
 
-/* default styling for progress bar */
 :host {
   display: flex;
   height: 100%;
@@ -36,13 +35,13 @@
     }
 
     &.flash {
-      padding: 0 600px;
+      padding: 0 calc(100% + 100px);
       background-image: linear-gradient(
         135deg,
-        $silver 48%,
-        $sand 49%,
-        $sand 51%,
-        $silver 52%
+        $silver 46%,
+        $sand 48%,
+        $sand 52%,
+        $silver 54%
       );
       animation: progress-bar-flash 3s linear infinite;
     }
@@ -95,18 +94,14 @@
 }
 
 @-webkit-keyframes progress-bar-flash {
-  from {
-    transform: translateX(-1000px);
-  }
-  to {
-    transform: translateX(0px);
-  }
+  0% { transform: translateX(calc(-50% - 100px)) }
+  30% { transform: translateX(calc(-50% - 100px)) }
+  60% { transform: translateX(0%) }
+  100% { transform: translateX(0%) }
 }
 @keyframes progress-bar-flash {
-  from {
-    transform: translateX(-1000px);
-  }
-  to {
-    transform: translateX(0px);
-  }
+  0% { transform: translateX(calc(-50% - 100px)) }
+  30% { transform: translateX(calc(-50% - 100px)) }
+  60% { transform: translateX(0%) }
+  100% { transform: translateX(0%) }
 }
diff --git a/projects/novo-elements/src/elements/progress/ProgressBar.ts b/projects/novo-elements/src/elements/progress/ProgressBar.ts
@@ -30,8 +30,8 @@ const PROGRESS_BAR_VALUE_ACCESSOR = {
   styleUrls: ['./ProgressBar.scss'],
   providers: [PROGRESS_BAR_VALUE_ACCESSOR],
   template: `
-    <div *ngIf="isLinear()" class="progress-bar"></div>
-    <svg *ngIf="isRadial()" width="120" height="120">
+    <div *ngIf="appearance === progressAppearance.LINEAR" class="progress-bar"></div>
+    <svg *ngIf="appearance === progressAppearance.RADIAL" width="120" height="120">
       <circle
         [style.strokeDasharray]="circumference"
         [style.strokeDashoffset]="dashoffset"
@@ -42,7 +42,6 @@ const PROGRESS_BAR_VALUE_ACCESSOR = {
         fill="transparent"
         class="progress__value"
       />
-      <!-- <text x="18" y="20.35" class="percentage">30%</text> -->
     </svg>
   `,
 })
@@ -61,6 +60,7 @@ export class NovoProgressBarElement implements ControlValueAccessor, OnInit {
   public radius = 54;
   public circumference = 2 * Math.PI * this.radius;
   public dashoffset: number;
+  public progressAppearance = ProgressAppearance;
 
   @HostBinding('class.striped')
   @Input()
@@ -76,7 +76,7 @@ export class NovoProgressBarElement implements ControlValueAccessor, OnInit {
 
   @HostBinding('style.width')
   get width() {
-    if (this.isRadial()) {
+    if (this.appearance === ProgressAppearance.RADIAL) {
       return `100%`;
     }
     return `${this._percent * 100}%`;
@@ -128,6 +128,9 @@ export class NovoProgressBarElement implements ControlValueAccessor, OnInit {
     if (this.indeterminate || this.flash) {
       this._value = this.progress?.total || 100;
     }
+    if (this.flash) {
+      this.progress.fitContainer = true;
+    }
     if (this.progress) {
       this._percent = this._value / this.progress.total;
       this.appearance = this.progress.appearance;
@@ -158,12 +161,4 @@ export class NovoProgressBarElement implements ControlValueAccessor, OnInit {
   setDisabledState(disabled: boolean): void {
     this.disabled = disabled;
   }
-
-  isLinear() {
-    return this.appearance === ProgressAppearance.LINEAR;
-  }
-
-  isRadial() {
-    return this.appearance === ProgressAppearance.RADIAL;
-  }
 }
diff --git a/...s/novo-examples/src/components/progress/progress-bar-usage/progress-bar-usage-example.css b/...s/novo-examples/src/components/progress/progress-bar-usage/progress-bar-usage-example.css
@@ -1,3 +1,9 @@
-span[tooltip]{
+span[tooltip] {
   margin-left: 10px;
 }
+
+.resizable {
+  resize: horizontal;
+  overflow: auto;
+  width: 200px;
+}
diff --git a/.../novo-examples/src/components/progress/progress-bar-usage/progress-bar-usage-example.html b/.../novo-examples/src/components/progress/progress-bar-usage/progress-bar-usage-example.html
@@ -1,6 +1,8 @@
-<novo-progress>
-  <novo-progress-bar flash="true"></novo-progress-bar>
-</novo-progress>
+<div class="resizable">
+  <novo-progress>
+    <novo-progress-bar flash="true"></novo-progress-bar>
+  </novo-progress>
+</div>
 
 <br />