Google Like Slim Progress Bar Plugin - NProgress

NProgress is a tiny JavaScript plugin for creating a slim and nanoscopic progress bar which features realistic trickle animations to convince your users that something is happening. 

Perfect for Turbolinks, Pjax, and other Ajax-heavy apps. Inspired by Google, YouTube, and Medium.

How to use it:

1. Include the NProgress plugin's JavaScript on the web page. jQuery is optional.

<script src="jquery.min.js"></script>
<script src="nprogress.js"></script>

2. Include required NProgress stylesheet to style the progress bar

<link href="nprogress.css" rel="stylesheet" />

3. The javascript to start/end the progress bar.

// start the progress bar
NProgress.start();

// end the progress bar
NProgress.done();

// show the progress bar even if it's not being shown
NProgress.done(true);

4. Animate the progress bar to a specifc progress percentage.

// 0%
NProgress.set(0.0); 

// 50%
NProgress.set(0.5);

// 100%
NProgress.set(1.0);

5. Increment the progress bar.

// +20% until 99.4%
NProgress.inc(0.2); 

6. Config the progress bar with the following options.

NProgress.configure({ 

  // minimum progress percentage
  minimum: 0.08,

  // easing function
  easing: 'linear',
  positionUsing: '',

  // animation speed
  speed: 200,

  // turn on/off the automatic incrementing behavior
  trickle: true,
  trickleSpeed: 200,

  // show loading spinner
  showSpinner: true,

  // progress bar selector
  barSelector: '[role="bar"]',

  // spinner selector
  spinnerSelector: '[role="spinner"]',

  // append the progress bar to this element
  parent: 'body',

  // custom template
  template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  
});

Changelog:

2020-04-19

• v1.0.0-1

2019-11-07

• Update the plugin. Now works as a Vanilla JavaScript plugin.
• Update the how-to documentation.

---

This awesome jQuery plugin is developed by rstacruz. For more Advanced Usages, please check the demo page or visit the official website.