Create feature indeterminate

Readme.md

@@ -170,6 +170,13 @@ Turn off loading spinner by setting it to false. (default: `true`)
 NProgress.configure({ showSpinner: false });
 ~~~
 
+#### `indeterminate`
+Set progress bar style as indeterminate (default: `false`)
+
+~~~ js
+NProgress.configure({ indeterminate: true });
+~~~
+
 #### `parent`
 specify this to change the parent container. (default: `body`)
 

nprogress.css

@@ -1,6 +1,12 @@
 /* Make clicks pass-through */
 #nprogress {
   pointer-events: none;
+
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 2px;
 }
 
 #nprogress .bar {
@@ -53,6 +59,27 @@
           animation: nprogress-spinner 400ms linear infinite;
 }
 
+#nprogress .indeterminate {
+  background-color: white;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .inc, #nprogress .dec {
+  position: absolute;
+  top: 0;
+  background-color: #29d;
+  height: 2px;
+}
+
+#nprogress .inc {
+  animation: nprogress-indeterminate-increase 2s infinite;
+}
+
+#nprogress .dec {
+  animation: nprogress-indeterminate-decrease 2s 0.5s infinite;
+}
+
 .nprogress-custom-parent {
   overflow: hidden;
   position: relative;
@@ -72,3 +99,11 @@
   100% { transform: rotate(360deg); }
 }
 
+@keyframes nprogress-indeterminate-increase {
+  from { left: -5%; width: 5%; }
+  to { left: 130%; width: 100%;}
+}
+@keyframes nprogress-indeterminate-decrease {
+  from { left: -80%; width: 80%; }
+  to { left: 110%; width: 10%;}
+}

nprogress.js

@@ -24,10 +24,20 @@
     trickle: true,
     trickleSpeed: 200,
     showSpinner: true,
+    indeterminate: false,
     barSelector: '[role="bar"]',
+    indeterminateSelector: '[role="indeterminate"]',
     spinnerSelector: '[role="spinner"]',
     parent: 'body',
-    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+    template: `<div class="bar" role="bar">
+                <div class="peg"></div>
+              </div>
+              <div class="spinner" role="spinner">
+                <div class="spinner-icon"></div>
+              </div>
+              <div role="indeterminate" class="indeterminate">
+                <div class="inc"></div><div class="dec"></div>
+              </div>`
   };
 
   /**
@@ -78,7 +88,7 @@
       if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
 
       // Add transition
-      css(bar, barPositionCSS(n, speed, ease));
+      if(bar) css(bar, barPositionCSS(n, speed, ease));
 
       if (n === 1) {
         // Fade out
@@ -237,18 +247,30 @@
         parent = isDOM(Settings.parent)
           ? Settings.parent
           : document.querySelector(Settings.parent),
-        spinner
+        spinner,
+        indeterminate
 
     css(bar, {
       transition: 'all 0 linear',
       transform: 'translate3d(' + perc + '%,0,0)'
     });
 
+
+
     if (!Settings.showSpinner) {
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinner && removeElement(spinner);
     }
 
+    if(!Settings.indeterminate) {
+      indeterminate = progress.querySelector(Settings.indeterminateSelector);
+      indeterminate && removeElement(indeterminate);
+    }
+
+    if(Settings.indeterminate) {
+      bar && removeElement(bar);
+    }
+
     if (parent != document.body) {
       addClass(parent, 'nprogress-custom-parent');
     }

test/test.js

@@ -170,6 +170,28 @@
         assert.equal($("#nprogress .spinner").length, 0);
       });
     });
+
+    // ----
+
+    describe('.configure(indeterminate)', function() {
+      it('should render (on true)', function() {
+        NProgress.configure({ indeterminate: true });
+        NProgress.start();
+
+        assert.equal($("#nprogress .indeterminate").length, 1);
+      });
+
+      it('should be false by default', function() {
+        assert.equal(NProgress.settings.indeterminate, false);
+      });
+
+      it('should hide progress bar render (when indeterminate true)', function() {
+        NProgress.configure({ indeterminate: true });
+        NProgress.start();
+
+        assert.equal($("#nprogress .bar").length, 0);
+      });
+    });
   });
 
 })();