Simple slim progress bars
npm install multi-nprogressNProgress
=========
> Minimalist progress bar
Slim progress bars for Ajax applications. Inspired by Google, YouTube, and
Medium.
Installation
------------
Add [nprogress.js] and [nprogress.css] to your project.
``html`
NProgress is available via [npm].
$ npm install --save nprogress
Also available via [unpkg] CDN:
- https://unpkg.com/multi-nprogress@0.3.3/nprogress.js
- https://unpkg.com/multi-nprogress@0.3.3/nprogress.css
Basic usage
-----------
you should instantiate the progress bar
~~~ js
var nprogress = NProgress();
~~~
then Simply call start() and done() to control the progress bar.
~~~ js
nprogress.start();
nprogress.done();
~~~
~~~ js
$(document).on('turbolinks:click', function() {
nprogress.start();
});
$(document).on('turbolinks:render', function() {
nprogress.done();
nprogress.remove();
});
~~~
~~~ js
$(document).on('page:fetch', function() { nprogress.start(); });
$(document).on('page:change', function() { nprogress.done(); });
$(document).on('page:restore', function() { nprogress.remove(); });
~~~
~~~ js
$(document).on('pjax:start', function() { nprogress.start(); });
$(document).on('pjax:end', function() { nprogress.done(); });
~~~
Ideas
-----
* Add progress to your Ajax calls! Bind it to the jQuery ajaxStart andajaxStop
events.
* Make a fancy loading bar even without Turbolinks/Pjax! Bind it to
$(document).ready and $(window).load.
Advanced usage
--------------
__Percentages:__ To set a progress percentage, call .set(n), where n is a0..1
number between .
~~~ js
var nprogress = NProgress();
nprogress.set(0.0); // Sorta same as .start()
nprogress.set(0.4);
nprogress.set(1.0); // Sorta same as .done()
~~~
__Incrementing:__ To increment the progress bar, just use .inc(). This
increments it with a random amount. This will never get to 100%: use it for
every image load (or similar).
~~~ js
nprogress.inc();
~~~
If you want to increment by a specific value, you can pass that as a parameter:
~~~ js
nprogress.inc(0.2); // This will get the current status value and adds 0.2 until status is 0.994
~~~
__Force-done:__ By passing true to done(), it will show the progress bar
even if it's not being shown. (The default behavior is that .done() will not
do anything if .start() isn't called)
~~~ js
nprogress.done(true);
~~~
__Get the status value:__ To get the status value, use .status
Configuration
-------------
#### minimum
Changes the minimum percentage used upon starting. (default: )
~~~ js
nprogress.configure({ minimum: 0.1 });
~~~
#### template
You can change the markup using . To keep the progressrole='bar'
bar working, keep an element with in there. See the [default template]
for reference.
~~~ js
nprogress.configure({
template: "
#### easing and speed
Adjust animation settings using easing (a CSS easing string)
and speed (in ms). (default: and 200)
~~~ js
nprogress.configure({ easing: 'ease', speed: 500 });
~~~
#### trickle
Turn off the automatic incrementing behavior by setting this to . (default: true)
~~~ js
nprogress.configure({ trickle: false });
~~~
#### trickleSpeed
Adjust how often to trickle/increment, in ms.
~~~ js
nprogress.configure({ trickleSpeed: 200 });
~~~
#### showSpinner
Turn off loading spinner by setting it to false. (default: )
~~~ js
nprogress.configure({ showSpinner: false });
~~~
#### parent
Specify this to change the parent container. (default: ).#id
Can either specify a query selector (, .class, tag) or an HTMLElement directly.
~~~ js
nprogress.configure({ parent: '#container' });
// OR
var elt = document.getElementById('#container')
nprogress.configure({ parent: elt });
~~~
Also this is useful when you want to have multi progress bar in your page you need to give different parent for each
~~~ js
var nprogress1 = NProgress();
var nprogress2 = NProgress();
nprogress1.configure({ parent: '#container1' });
nprogress2.configure({ parent: '#container2' });
~~~
Customization
-------------
Just edit nprogress.css to your liking. Tip: you probably only want to find#29d`.
and replace occurrences of
The included CSS file is pretty minimal... in fact, feel free to scrap it and
make your own!
Resources
---------
* New UI Pattern: Website Loading Bars (usabilitypost.com)
Support
-------
__Bugs and requests__: submit them through the project's issues tracker.
Thanks
------
multi-nprogress © 2018 Ramy Rais. Released under the [MIT License].
Authored and maintained by Rico Sta. Cruz with help from [contributors].
Spacial Thanks
------
multi-nprogress is based on NProgress by Rico Sta. Cruz.
> GitHub @RamyRais
[nprogress.js]: https://github.com/RamyRais/multi-nprogress/blob/master/nprogress.js
[nprogress.css]: https://github.com/RamyRais/multi-nprogress/blob/master/nprogress.css
[MIT License]: http://mit-license.org/
[contributors]: http://github.com/RamyRais/multi-nprogress/contributors
[npm]: https://www.npmjs.com/package/multi-nprogress