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%: use it for every image load (or similar).

NProgress.inc();

If you want to increment by a specific value, you can pass that as a parameter:

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)

NProgress.done(true);

Get the status value: To get the status value, use .status

Configure:

Nprogress.configure({…})

1. minimum: the min percentage when starting
2. template: the template of markup
3. easing/speed: adjust animation settings
4. trickle: boolean for automatically incrementing behavior
5. trickleSpeed: the speed of trickle
6. showSpinner: boolean for loading spinner
7. parent: change the parent container

The demo is below:

👉Follow me for more useful web development content! love sharing🥰