Merge pull request #3432 from IgniteUI/indeterminate-progress

feat(progress): indeterminate progress implementation
IgniteUI · Jan 7, 2019 · d2e430b · d2e430b
2 parents 7b3a713 + 37fb219
commit d2e430b
Show file tree

Hide file tree

Showing 14 changed files with 482 additions and 268 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 7.1.1
+- **Progress Indicators**:
+    - `igx-circular-bar` and `igx-linear-bar` now feature an indeterminate input property. When this property is set to true the indicator will be continually growing and shrinking along the track. 
 
 
 ## 7.1.2

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss
@@ -7,47 +7,19 @@
 ////
 
 /// Linear Progress
-@include b(progress-linear) {
+@include b(igx-linear-bar) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
     @extend %linear-display !optional;
 
-    @include e(bar) {
+    @include e(base) {
         @extend %linear-bar !optional;
     }
 
-    @include e(bar-base) {
-        @extend %linear-bar-base !optional;
-    }
-
-    @include e(bar-progress) {
-        @extend %linear-bar-progress !optional;
-    }
-
-    @include e(bar-progress, $m: default) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--default !optional;
-    }
-
-    @include e(bar-progress, $m: danger) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--danger !optional;
-    }
-
-    @include e(bar-progress, $m: warning) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--warning !optional;
-    }
-
-    @include e(bar-progress, $m: info) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--info !optional;
-    }
-
-    @include e(bar-progress, $m: success) {
-        @extend %linear-bar-progress !optional;
-        @extend %linear-bar-progress--success !optional;
+    @include e(indicator) {
+        @extend %linear-indicator !optional;
+        @extend %linear-indicator--default !optional;
     }
 
     @include e(value) {
@@ -80,52 +52,61 @@
         @extend %linear-value--hidden !optional;
     }
 
-    @include m(striped) {
-        @include e(bar-progress) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(danger) {
+        @include e(indicator) {
+            @extend %linear-indicator--danger !optional;
         }
+    }
 
-        @include e(bar-progress, $m: default) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(warning) {
+        @include e(indicator) {
+            @extend %linear-indicator--warning !optional;
         }
+    }
 
-        @include e(bar-progress, $m: danger) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(info) {
+        @include e(indicator) {
+            @extend %linear-indicator--info !optional;
         }
+    }
 
-        @include e(bar-progress, $m: warning) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(success) {
+        @include e(indicator) {
+            @extend %linear-indicator--success !optional;
         }
+    }
+
+    @include m(striped) {
+        @include e(indicator) {
+            @extend %linear-indicator--striped !optional;
+        }
+    }
 
-        @include e(bar-progress, $m: info) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+    @include m(indeterminate) {
+        @include e(indicator) {
+            @extend %linear-indicator--indeterminate !optional;
         }
 
-        @include e(bar-progress, $m: success) {
-            @extend %linear-bar-progress !optional;
-            @extend %linear-bar-progress--striped !optional;
+        @include e(value) {
+            @extend %linear-value !optional;
+            @extend %linear-value--hidden !optional;
         }
     }
 }
 
 /// Circular Progress
-@include b(progress-circular) {
+@include b(igx-circular-bar) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
     @extend %circular-display !optional;
 
-    @include e(innercircle) {
-        @extend %circular-innercircle !optional;
+    @include e(inner) {
+        @extend %circular-inner !optional;
     }
 
-    @include e(circle) {
-        @extend %circular-circle !optional;
+    @include e(outer) {
+        @extend %circular-outer !optional;
     }
 
     @include e(text) {
@@ -136,4 +117,16 @@
         @extend %circular-text !optional;
         @extend %circular-text--hidden !optional;
     }
+
+    @include m(indeterminate) {
+        @extend %circular-display--indeterminate !optional;
+
+        @include e(outer) {
+            @extend %circular-outer--indeterminate !optional;
+        }
+
+        @include e(text) {
+            @extend %circular-text--hidden !optional;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss
@@ -41,7 +41,7 @@
     $stripes-color: null,
     $text-color: null
 ) {
-    $name: 'igx-progress-linear';
+    $name: 'igx-linear-bar';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
     @return extend($theme, (
@@ -76,33 +76,26 @@
     %linear-display {
         position: relative;
         display: flex;
-        align-items: center;
-        flex-flow: column nowrap;
         width: 100%;
+        flex: 1 1 100%;
     }
 
     %linear-bar {
-        width: inherit;
-        height: $bar-height;
-        overflow: hidden;
-    }
-
-    %linear-bar-base {
         position: absolute;
         width: inherit;
-        height: inherit;
+        height: $bar-height;
         background: --var($theme, 'track-color');
+        overflow: hidden;
         z-index: 0;
     }
 
-    %linear-bar-progress {
+    %linear-indicator {
         width: 100%;
         position: relative;
         height: inherit;
-        backface-visibility: hidden;
     }
 
-    %linear-bar-progress--striped {
+    %linear-indicator--striped {
         background-image: linear-gradient(
             -45deg,
             $stripe-color 25%,
@@ -116,23 +109,39 @@
         background-size: 40px 40px;
     }
 
-    %linear-bar-progress--default {
+    %linear-indicator--indeterminate {
+        @include animation(indeterminate-bar 2s cubic-bezier(0, .085, .68, .53) infinite);
+        width: 100% !important;
+
+        &::before {
+            position: absolute;
+            content: '';
+            top: 0;
+            left: -200%;
+            width: 100%;
+            height: inherit;
+            background-color: inherit;
+            transform-origin: top right;
+        }
+    }
+
+    %linear-indicator--default {
         background: --var($theme, 'fill-color-default')
     }
 
-    %linear-bar-progress--danger {
+    %linear-indicator--danger {
         background-color: --var($theme, 'fill-color-danger');
     }
 
-    %linear-bar-progress--warning {
+    %linear-indicator--warning {
         background-color: --var($theme, 'fill-color-warning');
     }
 
-    %linear-bar-progress--info {
+    %linear-indicator--info {
         background-color: --var($theme, 'fill-color-info');
     }
 
-    %linear-bar-progress--success {
+    %linear-indicator--success {
         background-color: --var($theme, 'fill-color-success');
     }
 
@@ -191,7 +200,7 @@
     $progress-circle-color: null,
     $text-color: null
 ) {
-    $name: 'igx-progress-circular';
+    $name: 'igx-circular-bar';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
     @return extend($theme, (
@@ -202,12 +211,15 @@
         text-color: $text-color
     ));
 }
-
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} igx-root-css-vars
 /// @requires rem
+/// @requires {mixin} rotate-center
 /// @requires --var
 @mixin igx-progress-circular($theme) {
+    // Include rotate animation
+    @include rotate-center();
+
     @include igx-root-css-vars($theme);
 
     // @debug $theme;
@@ -216,27 +228,44 @@
     $circular-value-fw: 600;
 
     %circular-display {
-        width: 100%;
-        height: 100%;
+        display: inline-flex;
+        flex: 1 1 auto;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            min-width: 24px;
+            min-height: 24px;
+        }
+    }
+
+    %circular-display--indeterminate {
+        @include animation(rotate-center 1.4s linear infinite);
+        transform-origin: 50% 50%;
     }
 
-    %circular-innercircle {
+    %circular-inner {
         stroke-width: 4;
         fill: transparent;
         stroke: --var($theme, 'base-circle-color');
     }
 
-    %circular-circle {
+    %circular-outer {
         fill: transparent;
         stroke: --var($theme, 'progress-circle-color');
-        stroke-width: 6;
-        stroke-linecap: round;
+        stroke-width: 4;
         stroke-dashoffset: 289;
         stroke-dasharray: 289;
         transform-origin: 50% 50%;
         transform: rotate(-90deg);
     }
 
+    %circular-outer--indeterminate {
+        stroke-dashoffset: 180;
+        stroke-dasharray: 180;
+        @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) infinite);
+    }
+
     %circular-text {
         font-size: $circular-value-fs;
         font-weight: $circular-value-fw;
@@ -247,3 +276,31 @@
         visibility: hidden;
     }
 }
+
+@include keyframes('indeterminate-bar') {
+    0% {
+        transform: scaleX(0) translateX(-100%);
+        transform-origin: left;
+    }
+
+    50% {
+        transform: scaleX(1) translateX(50%);
+        transform-origin: right;
+    }
+
+    100% {
+        transform: scaleX(0) translateX(200%);
+        transform-origin: right;
+    }
+}
+
+@include keyframes('indeterminate-accordion') {
+    50% {
+        stroke-dashoffset: 260;
+        stroke-dasharray: 289;
+    }
+
+    100% {
+        stroke-dashoffset: -180;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -113,8 +113,8 @@ $dark-schema: (
     igx-navbar: $_dark-navbar,
     igx-navdrawer: $_dark-navdrawer,
     igx-overlay: $_dark-overlay,
-    igx-progress-linear: $_dark-progress-linear,
-    igx-progress-circular: $_dark-progress-circular,
+    igx-linear-bar: $_dark-progress-linear,
+    igx-circular-bar: $_dark-progress-circular,
     igx-radio: $_dark-radio,
     igx-ripple: $_dark-ripple,
     igx-slider: $_dark-slider,

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -114,8 +114,8 @@ $light-schema: (
     igx-navbar: $_light-navbar,
     igx-navdrawer: $_light-navdrawer,
     igx-overlay: $_light-overlay,
-    igx-progress-linear: $_light-progress-linear,
-    igx-progress-circular: $_light-progress-circular,
+    igx-linear-bar: $_light-progress-linear,
+    igx-circular-bar: $_light-progress-circular,
     igx-radio: $_light-radio,
     igx-ripple: $_light-ripple,
     igx-slider: $_light-slider,