Simple jQuery Circular Loading Bar with Percentage - Rotator

File Size: 3.25KB
Views Total: 31495
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Circular Loading Bar with Percentage - Rotator

Rotator is a simple jQuery plugin for creating a circular loading bar (progress bar) with percentage display and callback events support.

How to use it:

1. Include jQuery library and jQuery Rotator in the head section of your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="rotator.js"></script>

2. Create a container for the rotating loader

<div id="rotator" style="height:100px;width:100px"></div>

3. Call the plugin with default options

<script>
$(window).load(function () {
$("#rotator").rotator();       
});
</script>

4. All the options

<script>
$(window).load(function () {
$("#rotator").rotator({
starting: 0,
ending: 100,
percentage: true,
color: 'green',
lineWidth: 7,
timer: 10,
radius: 40,
fontStyle: 'Calibri',
fontSize: '20pt',
fontColor: 'darkblue',
backgroundColor: 'lightgray',
callback: function () {
}
});       
});
</script>

This awesome jQuery plugin is developed by surajpratap. For more Advanced Usages, please check the demo page or visit the official website.