Slim progress bar jQuery plugin – NProgress

It’s a Google-like jQuery plugin, implementing slim progress bar.

NProgress – slim progress bar plugin

NProgress is a tiny jQuery plugin for creating a slim progress bar which features realistic trickle animations to convince your users that something is happening. It’s perfect for Turbolinks, Pjax, and other Ajax-heavy apps.

“Inspired by Google, YouTube, and Medium.”

A a progress bar for you web app, featuring realistic trickle animations to convince your users that something is happening.

Methods:

NProgress.start() — shows the progress bar

NProgress.set(0.4) — sets a percentage

NProgress.inc() — increments by a little

NProgress.done() — completes the progress

Slim progress bar plugin
Slim progress bar plugin

Usage

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

JS:

NProgress.start();
NProgress.done();

Percentages

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

NProgress.set(0.0);     // same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // same as .done()

Progress – increment

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();

We can increment by a specific value by parameter:

NProgress.inc(0.2); 

Homepage and demo:

http://ricostacruz.com/nprogress

GitHub:

https://github.com/rstacruz/nprogress

License: MIT

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1