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: '