# nprogress
**Repository Path**: mirrors_GerHobbelt/nprogress
## Basic Information
- **Project Name**: nprogress
- **Description**: For slim progress bars like on YouTube, Medium, etc
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2025-08-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
NProgress
=========
Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and
Medium.
This version has the ability to display a progress message
next to the spinner (top right corner).
All relevant functions (start(), set(), inc(), trickle()) have
an additional property (msg) that can be any (HTML) string.
You will definitely want to play with the CSS to make it look good
on your site, but it looks just great on white background
(has a glow to the text).
This is also a pure JS version of rsantacruz's [NProgress](http://ricostacruz.com/nprogress),
which comes form mparramont's fork (see link above).
You do NOT need jQuery or any other JS library for this version.
Installation
------------
Add [nprogress.js] and [nprogress.css] to your project.
```html
```
NProgress is available via [bower] and [npm] and [spm].
$ bower install --save nprogress
$ npm install --save nprogress
[bower]: http://bower.io/search/?q=nprogress
[npm]: https://www.npmjs.org/package/nprogress
[spm]: http://spmjs.io/package/nprogress
Basic usage
-----------
Simply call `start()` and `done()` to control the progress bar.
~~~ js
NProgress.start(); // or NProgress.start("Uploading data");
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, "Uploading form data");
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();
NProgress.inc("default", "A little more");
NProgress.inc(0.2, "20% more");
~~~
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`.
The status value is `null` when the progress bar is not being shown,
otherwise the status value will be the last perunage set via
`.set()` (and `.inc()`)
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: "