Progress bar

pandoraui · Dec 5, 2015 · d74bf0b · d74bf0b
1 parent 7f11db6
commit d74bf0b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 46 deletions.
diff --git a/kitchen-sink-ios/jade/progressbar.jade b/kitchen-sink-ios/jade/progressbar.jade
@@ -34,20 +34,24 @@
             p
               a(href="#").button Start Loading
           p Overlay with determinate progress bar on top of the app:
-          .ks-demo-progressbar-overlay
-            p
-              a(href="#").button Start Loading
+          p.ks-demo-progressbar-overlay
+            a(href="#").button Start Loading
       .content-block-title Infinite Progress Bar
       .content-block
         .content-block-inner
           p When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.
           p Inline infinite progress bar
           p
-            span.progressbar-infinite(style="position:relative")
+            span.progressbar-infinite
+          p Multi-color infinite progress bar
+          p
+            span.progressbar-infinite.color-multi
           p Overlay with infinite progress bar on top of the app
-          .ks-demo-progressbar-infinite-overlay
-            p
-              a(href="#").button Start Loading
+          p.ks-demo-progressbar-infinite-overlay
+            a(href="#").button Start Loading
+          p Overlay with infinite multi-color progress bar on top of the app
+          p.ks-demo-progressbar-infinite-multi-overlay
+            a(href="#").button Start Loading
       .content-block-title Colored
       .list-block
         ul

diff --git a/kitchen-sink-ios/js/kitchen-sink.js b/kitchen-sink-ios/js/kitchen-sink.js
@@ -715,7 +715,6 @@ myApp.onPageInit('pickers', function (page) {
 });
 
 /* ===== Progress Bars ===== */
-
 myApp.onPageInit('progressbar', function (page) {
     $$('.ks-demo-progressbar-inline .button').on('click', function () {
         var progress = $$(this).attr('data-progress');
@@ -766,8 +765,18 @@ myApp.onPageInit('progressbar', function (page) {
         simulateLoading();
     });
     $$('.ks-demo-progressbar-infinite-overlay .button').on('click', function () {
-        if ($$('body').children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
-        myApp.showProgressbar();
+        // Add Directly To Body
+        var container = $$('body');
+        if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
+        myApp.showProgressbar(container);
+        setTimeout(function () {
+            myApp.hideProgressbar();
+        }, 3000);
+    });
+    $$('.ks-demo-progressbar-infinite-multi-overlay .button').on('click', function () {
+        var container = $$('body');
+        if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
+        myApp.showProgressbar(container, 'multi');
         setTimeout(function () {
             myApp.hideProgressbar();
         }, 3000);

diff --git a/src/less/material/progressbar.less b/src/less/material/progressbar.less
@@ -43,7 +43,6 @@
         .animation(progressbar-infinite-1 2s linear infinite);
     }
     &:after {
-        // display: none;
         .animation(progressbar-infinite-2 2s linear infinite);
     }
     html.with-statusbar-overlay body > & {
@@ -54,13 +53,14 @@
 
 // Multicolor
 .progressbar-infinite.color-multi {
+    background: none !important;
     &:before, &:after {
         width: 100%;
         animation: none;
     }
     &:before {
         background: none;
-        .animation(progressbar-infinite-multicolor-bg 3s linear infinite);
+        .animation(progressbar-infinite-multicolor-bg 3s step-end infinite);
     }
     &:after {
         background: none;
@@ -196,76 +196,52 @@ html.with-statusbar-overlay body > .progressbar {
     0% {
         background-color: @green;
     }
-    24.9999% {
-        background-color: @green;
-    }
     25% {
         background-color: @red;
     }
-    49.9999% {
-        background-color: @red;
-    }
     50% {
         background-color: @blue;
     }
-    74.9999% {
-        background-color: @blue;
-    }
     75% {
         background-color: @yellow;
     }
-    100% {
-        background-color: @yellow;
-    }
 }
 @keyframes progressbar-infinite-multicolor-bg {
     0% {
         background-color: @green;
     }
-    24.9999% {
-        background-color: @green;
-    }
     25% {
         background-color: @red;
     }
-    49.9999% {
-        background-color: @red;
-    }
     50% {
         background-color: @blue;
     }
-    74.9999% {
-        background-color: @blue;
-    }
     75% {
         background-color: @yellow;
     }
-    100% {
-        background-color: @yellow;
-    }
 }
 @-webkit-keyframes progressbar-infinite-multicolor-fill {
     0% {
         -webkit-transform: scaleX(0);
         background-color: @red;
     }
-    24.99999999% {
+    24.9% {
         -webkit-transform: scaleX(1);
         background-color: @red;
     }
     25% {
         -webkit-transform: scaleX(0);
-        background-color: @lightblue;
+        background-color: @blue;
     }
-    49.99999999% {
+    49.9% {
         -webkit-transform: scaleX(1);
-        background-color: @lightblue;
+        background-color: @blue;
     }
     50% {
         -webkit-transform: scaleX(0);
         background-color: @yellow;
     }
-    74.99999999% {
+    74.9% {
         -webkit-transform: scaleX(1);
         background-color: @yellow;
     }
@@ -283,23 +259,23 @@ html.with-statusbar-overlay body > .progressbar {
         transform: scaleX(0);
         background-color: @red;
     }
-    24.99999999% {
+    24.9% {
         transform: scaleX(1);
         background-color: @red;
     }
     25% {
         transform: scaleX(0);
-        background-color: @lightblue;
+        background-color: @blue;
     }
-    49.99999999% {
+    49.9% {
         transform: scaleX(1);
-        background-color: @lightblue;
+        background-color: @blue;
     }
     50% {
         transform: scaleX(0);
         background-color: @yellow;
     }
-    74.99999999% {
+    74.9% {
         transform: scaleX(1);
         background-color: @yellow;
     }