feat(indeterminate bar): add property to enable indeterminate bar style

kKen94 · Aug 7, 2020 · d701dc3 · d701dc3
1 parent 82cf63c
commit d701dc3
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -83,14 +83,15 @@ You can filter the HTTP requests that would like to be avoided by the intercepto
 
 | Input                  | Description        | Default value   |
 | ---------------------- | ------------------ | --------------- |
-| ```color```         |                    | ```#0984e3```   |
-| ```showSpinner```      |                    | ```true```     |
+| ```color```            |                    | ```#0984e3```   |
+| ```showSpinner```      |                    | ```true```      |
 | ```showBar```          |                    | ```true```      |
+| ```indeterminate```    | Indeterminate style like Material                   | ```false```      |
 | ```barHeight```        |                    | ```1px```       |
 | ```spinnerDiameter```  |                    | ```10px```      |
 | ```initialValue```     | From 1 to 100      | ```undefined``` |
 | ```overlay```          | Show overlay that prevent user click | ```true```      |
-| ```overlayValue```     | From 0 to 1        | ```1```      |
+| ```overlayValue```     | From 0 to 1        | ```1```         |
 | ```spinnerSpeed```     | From 1 to 10       | ```4```         |
 
 

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -27,6 +27,10 @@
           <span>show bar</span>
           <mat-slide-toggle [(ngModel)]="showBar"></mat-slide-toggle>
         </li>
+        <li>
+          <span>indeterminate</span>
+          <mat-slide-toggle [(ngModel)]="indeterminate"></mat-slide-toggle>
+        </li>
         <li>
           <span class="bottom">color</span>
           <div class="square" [style.background-color]="color" (click)="showPicker = !showPicker;"></div>
@@ -81,6 +85,7 @@
       [overlay]="overlay"
       [overlayValue]="overlayValue"
       [showBar]="showBar"
+      [indeterminate]="indeterminate"
       [spinnerDiameter]="spinnerDiameter"
       [spinnerSpeed]="spinnerSpeed"></ngx-progress>
     <div class="full-height" fxLayout="column" fxLayoutAlign="center center">

diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -13,6 +13,7 @@ export class AppComponent {
   color = '#0984e3';
   showSpinner = true;
   showBar = true;
+  indeterminate = false;
   barHeight = '2px';
   spinnerDiameter = '15px';
   initialValue = 0;

diff --git a/projects/lib/src/lib/bar/bar.component.html b/projects/lib/src/lib/bar/bar.component.html
@@ -2,9 +2,12 @@
   <div class="spinner" *ngIf="includeSpinner" [style.border-color]="color" [style.margin-top]="barHeight">
     <div [style.width]="diameter" [style.height]="diameter" class="icon" [style.animation-duration]="1000/spinnerSpeed+'ms'"></div>
   </div>
-  <div id="loading-bar" *ngIf="includeBar" [style.color]="color">
-    <div class="bar" [style.background]="color" [style.height]="barHeight" [style.width]="loader.progress + '%'">
+  <div *ngIf="includeBar" [style.color]="color">
+    <div class="bar" *ngIf="!indeterminate" [style.background]="color" [style.height]="barHeight" [style.width]="loader.progress + '%'">
       <div class="peg" [style.height]="barHeight"></div>
     </div>
+    <div class="progress" *ngIf="indeterminate" [style.height]="barHeight">
+      <div class="indeterminate" [style.background]="color"></div>
+    </div>
   </div>
 </ng-container>
diff --git a/projects/lib/src/lib/bar/bar.component.scss b/projects/lib/src/lib/bar/bar.component.scss
@@ -7,9 +7,48 @@
     transition: 350ms linear all;
     color: #29d;
 
+    .progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      border-radius: 2px;
+      background-clip: padding-box;
+      overflow: hidden;
+      z-index: 10002;
+
+      & .indeterminate {
+        &:before {
+          content: '';
+          position: absolute;
+          background-color: inherit;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          will-change: left, right;
+          -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          background-color: inherit;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          will-change: left, right;
+          -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s;
+        }
+      }
+    }
+
     .bar {
       transition: width 350ms;
-
       background: #29d;
       position: absolute;
       z-index: 10002;
@@ -64,3 +103,63 @@
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
diff --git a/projects/lib/src/lib/bar/bar.component.ts b/projects/lib/src/lib/bar/bar.component.ts
@@ -12,6 +12,7 @@ export class BarComponent {
   @Input() color!: string;
   @Input() barHeight!: string;
   @Input() diameter!: string;
+  @Input() indeterminate!: string;
   // tslint:disable-next-line:variable-name
   _initialValue!: number;
   get initialValue(): number {

diff --git a/projects/lib/src/lib/ngx-progress.component.html b/projects/lib/src/lib/ngx-progress.component.html
@@ -4,6 +4,7 @@
     *ngIf="progressService.isStarted"
     [includeSpinner]="showSpinner"
     [includeBar]="showBar"
+    [indeterminate]="indeterminate"
     [barHeight]="barHeight"
     [color]="color"
     [diameter]="spinnerDiameter"

diff --git a/projects/lib/src/lib/ngx-progress.component.ts b/projects/lib/src/lib/ngx-progress.component.ts
@@ -26,6 +26,10 @@ export class NgxProgressComponent implements OnInit, OnDestroy {
    * Show and hide progress bar
    */
   @Input() showBar = true;
+  /**
+   * If true set indeterminate bar style, like Material
+   */
+  @Input() indeterminate = false;
   /**
    * Height of progress bar.
    *