NProgress — trickle animation progress bar

Nprogress.js is an alternate way to indicate the loading processing. The progress bar can animate with custom time and animation styles.

Official site

How to use it?

Step1:

import CSS and js files from npm or CDN

$ npm install --save nprogress

or

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"/>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>

Step2:

set a container in HTML

Step3:

js

fire up with NProgress.start()

and end the process with NProgress.done();

Documents:(Advanced use)

Percentages: To set a progress percentage, call .set(n), where n is a number between 0..1.

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%…