Google Like Slim Progress Bar Plugin - NProgress
File Size: | 16.9 KB |
---|---|
Views Total: | 22317 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.