NProgress
=========
[](http://travis-ci.org/rstacruz/nprogress)
[](https://npmjs.org/package/nprogress "View this project on npm")
[](https://www.jsdelivr.com/package/npm/nprogress)
> Minimalist progress bar
Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and
Medium.
Installation
------------
Add [nprogress.js] and [nprogress.css] to your project.
```html
```
NProgress is available via [bower] and [npm].
$ npm install --save nprogress
Also available via [unpkg] CDN:
- https://unpkg.com/nprogress@0.2.0/nprogress.js
- https://unpkg.com/nprogress@0.2.0/nprogress.css
[bower]: http://bower.io/search/?q=nprogress
[npm]: https://www.npmjs.org/package/nprogress
[unpkg]: https://unpkg.com/
Basic usage
-----------
Simply call `start()` and `done()` to control the progress bar.
~~~ js
NProgress.start();
NProgress.done();
~~~
### Turbolinks (version 5+)
Ensure you're using Turbolinks 5+, and use
this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-239107109))
~~~ js
$(document).on('turbolinks:click', function() {
NProgress.start();
});
$(document).on('turbolinks:render', function() {
NProgress.done();
NProgress.remove();
});
~~~
### Turbolinks (version 3 and below)
Ensure you're using Turbolinks 1.3.0+, and use
this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560))
~~~ js
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
~~~
### Pjax
Try this: (explained [here](https://github.com/rstacruz/nprogress/issues/22#issuecomment-36540472))
~~~ 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` and
`ajaxStop` 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 a
number between `0..1`.
~~~ js
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: `0.08`)
~~~ js
NProgress.configure({ minimum: 0.1 });
~~~
#### `template`
You can change the markup using `template`. To keep the progress
bar working, keep an element with `role='bar'` in there. See the [default template]
for reference.
~~~ js
NProgress.configure({
template: "