Round loading bar
I am using this jQuery plugin called Simple Circular Loading Bar with Percentage - Rotator http://www.jqueryscript.net/rotator/Simple-jQuery-Circular-Loading-Bar-with-Percentage-Rotator.html
how can i add another div
Here is a jsFiddle example - http://jsfiddle.net/fegvc5h8/
$(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() {}
});
});
and here is the code
+3
source to share
1 answer
Yes it is possible. http://jsfiddle.net/csdtesting/en83d3uu/
Open rotator.js
this script file and change the code as shown below. The dublication canvas IDs were found which I fixed by adding "-random number" to the canvas ID with jqueryMath.random():
...
var n = Math.random();
this.empty().append("<canvas height ="+this.height() + " width="+this.width()+" id='my-canvas-"+n+"'/ ></canvas>");
var canvas = document.getElementById('my-canvas-'+n);
And you can add as many as you like by adding div elements with different ids to your html:
<div id="rotator" style="height:300px;width:300px"></div>
<div id="rotator2" style="height:300px;width:300px"></div>
+4
source to share