Google Like Slim Progress Bar Plugin - NProgress

File Size: 16.9 KB
Views Total: 22081
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

// end the progress bar

// show the progress bar even if it's not being shown

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

// 0%

// 50%

// 100%

5. Increment the progress bar.

// +20% until 99.4%; 

6. Config the progress bar with the following options.


  // 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>'



  • v1.0.0-1


  • 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.