From 290bbb44b27f7065e6c08299e80414447b418d46 Mon Sep 17 00:00:00 2001 From: minseolee Date: Fri, 16 Jul 2021 20:42:00 +0900 Subject: [PATCH 1/4] added css styles for easier style apply --- nprogress.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/nprogress.css b/nprogress.css index 6752d7f..3c435a2 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 { From 405d271d5a008446e8c15c025e200eede04de9df Mon Sep 17 00:00:00 2001 From: minseolee Date: Thu, 22 Jul 2021 13:30:27 +0900 Subject: [PATCH 2/4] added indeterminate option forked from https://codepen.io/shalimano/pen/wBmNGJ --- nprogress.css | 29 +++++++++++++++++++++++++++++ nprogress.js | 28 +++++++++++++++++++++++++--- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/nprogress.css b/nprogress.css index 3c435a2..0c8f0a7 100644 --- a/nprogress.css +++ b/nprogress.css @@ -59,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; @@ -78,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..49212b4 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)' }); + console.log(Settings.showSpinner); + 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'); } From 07b3721246c8882749b2d3ec9f32e1ccb343f9c3 Mon Sep 17 00:00:00 2001 From: minseolee Date: Thu, 22 Jul 2021 13:46:49 +0900 Subject: [PATCH 3/4] Wrote testCode & Updated Readme.md --- Readme.md | 7 +++++++ nprogress.css | 2 +- test/test.js | 22 ++++++++++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) 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 0c8f0a7..48a06b4 100644 --- a/nprogress.css +++ b/nprogress.css @@ -77,7 +77,7 @@ } #nprogress .dec { - animation: nprogress-indeterminate-decrease 2s 0.5s infinite;; + animation: nprogress-indeterminate-decrease 2s 0.5s infinite; } .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); + }); + }); }); })(); From 2e486dfb8a191cb1d44eedf01c24aca6dd9f502e Mon Sep 17 00:00:00 2001 From: minseolee Date: Thu, 22 Jul 2021 13:53:21 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Removed=20console.log=20=F0=9F=98=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nprogress.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nprogress.js b/nprogress.js index 49212b4..cb341e3 100644 --- a/nprogress.js +++ b/nprogress.js @@ -255,8 +255,8 @@ transform: 'translate3d(' + perc + '%,0,0)' }); - console.log(Settings.showSpinner); + if (!Settings.showSpinner) { spinner = progress.querySelector(Settings.spinnerSelector); spinner && removeElement(spinner);