Example of the jQuery PercentageLoader loading progress display plug-in

Jquery.percentageloader this jquery plugin can produce an appealing, more intuitive way of showing progress. It uses the HTML 5 canvas to generate the progress picture, is a very small jQuery plug-in, compresses only then 10k, uses to display the very dazzling progress bar information.

The plugin's author, CSS, JS that is quite familiar with Ah, color changes are implemented by code, with the latest HTML5 canvas canvas technology, so do not support the old version of the browser.

How to use

1, the introduction of plug-in files and jquery library files

<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.percentageloader-0.1.js" ></script>

2, write a div box, and set a unique ID or class classes, easy to find this box container.

<div id= "TopLoader" ></div>
3. Initialize Plugin

var $topLoader = $ ("#topLoader"). Percentageloader ({
WIDTH:256,
HEIGHT:256,
Controllable:true,
progress:0,
Onprogressupdate:function (val) {
$topLoader. SetValue (Math.Round (val * 100.0));
}
});

This is the plug-in parameter, the first two for size, controllable said that can not click, Propress said from 0, Onprogressupdate, said the implementation process, in fact, is the implementation of setinterval.