Simple jQuery Circular Loading Bar with Percentage - Rotator
| File Size: | 3.25KB |
|---|---|
| Views Total: | 31558 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.





