Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.