diff --git a/Readme.md b/Readme.md index 2ddda6e..b768564 100644 --- a/Readme.md +++ b/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`) diff --git a/nprogress.css b/nprogress.css index 6752d7f..48a06b4 100644 --- a/nprogress.css +++ b/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%;} +} diff --git a/nprogress.js b/nprogress.js index cdb5f4b..cb341e3 100644 --- a/nprogress.js +++ b/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: '
' + template: `
+
+
+
+
+
+
+
+
` }; /** @@ -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'); } diff --git a/test/test.js b/test/test.js index a381b09..b978e35 100644 --- a/test/test.js +++ b/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); + }); + }); }); })();