How to install and use progress.js
This article is about how to install and use progress.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Progressjs is a JavaScript and css3 library that helps developers create management progress bars for each object on a web page. Support for page elements, images, video, text input, etc., users can customize the progress bar template, and it is easy to use.
Progress.js installation and use
/ / tosetprogress-barforwholepage
Progressjs () .start ()
/ / orforspecificelement
Progressjs ("# targetElement") .start ()
How to use progress.js
NProgress.start ()-displays the progress bar
NProgress.set (0.4)-sets the percentage
NProgress.inc ()-add a little bit
NProgress.done ()-complete the progress bar
You can, too.
Add to the place where you call Ajax! Bind it to jQueryajaxStart and ajaxStop events
You can make a wonderful progress bar without Turbolinks/Pjax! Bind it to $(document). Ready and $(window). Load
Configure plug-in
Modify the minimum percentage through minimum.
NProgress.configure ({minimum:0.1})
You can modify the tag structure through template. In order for the progress bar to work properly, you need an element that contains the role='bar' attribute.
NProgress.configure ({
Template: "..."
})
Adjust the animation settings and speed speed (millisecond ms) through ease (the easing value in a CSS).
NProgress.configure ({ease:'ease',speed:500})
Want to close the progress bar? Set trickle to false.
NProgress.configure ({trickle:false})
You can adjust trickleRate (how much per step) and trickleSpeed (step interval, in millisecond ms).
NProgress.configure ({trickleRate:0.02,trickleSpeed:800})
Want to disable the progress loop? Set showSpinner to false.
NProgress.configure ({showSpinner:false})
Thank you for reading! This is the end of the article on "how to install and use progress.js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
