jQuery nprogress.js Page Loading Progress Bar
The following explains how to use the methods. Open the Index.html page to see the results directly.
NProgress.start() ? Display the progress bar
NProgress.set(0.4) ? Set the percentage
NProgress.inc() ? Increment the progress slightly
NProgress.done() ? Complete the progress
Usage
You can also...
Add it wherever you make Ajax calls! Bind it to the jQuery ajaxStart and ajaxStop events.
You can create a beautiful progress bar even without Turbolinks/Pjax! Bind it to $(document).ready and $(window).load.
Plugin Configuration
Modify the minimum percentage using minimum.
1 | NProgress.configure({ minimum: 0.1 }); |
You can modify the markup structure using template. To ensure the progress bar works correctly, an element with the role='bar' attribute is required.
1 2 3 | NProgress.configure({ template: "..."}); |
Adjust the animation settings using ease (a CSS easing value) and the animation speed using speed (in milliseconds).
1 | NProgress.configure({ ease: 'ease', speed: 500 }); |
Want to disable progress increments? Set trickle to false.
1 | NProgress.configure({ trickle: false }); |
You can adjust trickleRate (the amount added per increment) and trickleSpeed (the interval between increments, in milliseconds).
1 | NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); |
Want to disable the progress spinner? Set showSpinner to false.
1 | NProgress.configure({ showSpinner: false }); |