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

This article shows you what the jQuery progress bar plug-in developed by HTML 5 is like, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Today we share a cool progress bar plug-in developed using HTML5 canvas technology-percentageloader. This plug-in is more cool than the ordinary horizontal progress bar, and the graphic effect is similar to the jQuery knob plug-in we introduced before. this plug-in is quick and easy to use and can be well applied to modern browsers. The plug-in uses HTML5 canvas to generate the graphical interface, the compressed version is only the size of 10kb, and uses vector Vector instead of images to generate, it is very convenient to generate graphics of different sizes. Open source software, everyone can easily and freely use.

Main characteristics

JQuery1.4+

Support browsers: Firefox 3.0, Safari 4.0, Chrome 7, IE9+, Opera 9 +

Provide a variety of control options

Easy to use, compressed file is very small, 10kb

Lossless support for graphics of all sizes

How to use

Pour into the related class library and its CSS:

Plug-in js code: $loader = $("# loader") .percentageLoader ({width: 400, height: 400, progress: 0})

Main option

Progress: initial load position (0-1)

Value: initial label value

Width: width

Height: height

Controllable: allows users to click to set values

OnProgressUpdate (value): provides a callback method that allows the use of updated values to control the progress bar

The callback function uses:

Var loader; loader = $("myDiv"). PercentageLoader ({controllable: true, onProgressUpdate: function (value) {loader.setProgress (value * 100.0);}}); this is what the jQuery progress bar plug-in developed by HTML 5 is like. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.