Percentage Loader

jQuery Percentage Loader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

Requirements

• jQuery 1.4+
• Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: bitbucket.org

1. INCLUDE JS FILES

<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="loader/jquery.percentageloader-01a.js" type="text/javascript"></script>

2. HTML

<div id="main-loader"></div>

3. JAVASCRIPT

$("#main-loader").percentageLoader({ width : 180, height : 180, progress : 0.5, value : '512kb'});

You can update the values with .setProgress() and .setValue() functions, e.g.

var loader = $("#myDiv").percentageLoader();
loader.setValue('250kb');
loader.setProgress(0.5);

You can handle updates with a user-controllable loader with a callback function:

var loader;
loader = $("myDiv").percentageLoader({
    controllable : true,
    onProgressUpdate : function (value) {
        loader.setProgress(value * 100.0);
    }
});

4. OPTIONS

• progress (initial starting position of loader, range 0 - 1.0)
• value (initial label for the value)
• width (default 256)
• height (default 256)
• controllable (true/false, defaults to false) allows the user to set the value by clicking
• onProgressUpdate(value) - provide a callback function for controllable loaders with the updated value