CODEWITHSUNDEEP
jqueryhtml
Darko Trajkovic
Darko Trajkovic

Reputation: 33

Circular 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 more 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

Upvotes: 3

Views: 353

Answers (1)

Giannis Grivas
Giannis Grivas

Reputation: 3412

Yes it is possible . http://jsfiddle.net/csdtesting/en83d3uu/

Open rotator.js file of this script and change the code as below.There were dublicate canvas ids which i fixed by adding "-random number" to the canvas element id with jquery Math.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 want 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>

Upvotes: 4

Related Questions