jquery plug-in NProgress.js creates web page loading progress bar_jquery

NProgress.js is an extremely thin nanoscale progress bar that uses realistic thin line animation to let users see what is happening on the web page!

You may have seen that red laser pulse on Youtube that appears when you switch pages. In fact, the progress bars of many mobile browsers have this style, but it is rare to implement it on web pages. However, with the NProgress jQuery plug-in, you can easily achieve it!

NProgress.js is applied to the slim progress bar of complex web pages. Inspired by Google, YouTube, and Medium.

Install

Depends on jQuery (version 1.8 and above), add nprogress.js and nprogress.css to your project.

How to use

NProgress.start() — Display progress bar

NProgress.set(0.4) —Set percentage

NProgress.inc() — add a little bit

NProgress.done() — completion progress bar

You can also...
Add it to where you call Ajax! Bind it to jQuery ajaxStart and ajaxStop events
Make a wonderful progress bar without Turbolinks/Pjax! Bind it to $(document).ready and $(window).load

Configuration plugin

Modify the minimum percentage through minimum.

NProgress.configure({ minimum: 0.1 });

You can modify the markup structure through template. In order for the progress bar to work properly, an element containing the role='bar' attribute is required.

NProgress.configure({ template: "..." });

Adjust animation settings and speed (milliseconds) via ease (an easing value in CSS).

NProgress.configure({ ease: 'ease', speed: 500 });

Want to turn off the progress bar step? Set trickle to false.

NProgress.configure({ trickle: false });

You can adjust trickleRate (how much each step increases) and trickleSpeed ​​(step interval, in milliseconds ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

Want to disable the progress ring? Set showSpinner to false.

NProgress.configure({ showSpinner: false });

Online demo http://ricostacruz.com/nprogress/

Source code download https://github.com/rstacruz/nprogress