title: multiple circle progress bars
body: <p>I'm using a script for creating some round progress bars.
   Here is some markup for creating them: </p>
  
  <pre><code>&lt;div class="loader"&gt;
  &lt;div class="loader-bg"&gt;
      &lt;div class="text"&gt;&lt;/div&gt;
  &lt;/div&gt;        
  &lt;div class="spiner-holder-one animate-0-25-a"&gt;
      &lt;div class="spiner-holder-two animate-0-25-b"&gt;
          &lt;div class="loader-spiner" style=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="spiner-holder-one animate-25-50-a"&gt;
      &lt;div class="spiner-holder-two animate-25-50-b"&gt;
          &lt;div class="loader-spiner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="spiner-holder-one animate-50-75-a"&gt;
      &lt;div class="spiner-holder-two animate-50-75-b"&gt;
          &lt;div class="loader-spiner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="spiner-holder-one animate-75-100-a"&gt;
      &lt;div class="spiner-holder-two animate-75-100-b"&gt;
          &lt;div class="loader-spiner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  this is some js :</p>
  
  <pre><code>    function renderProgress(progress)
      {
          progress = Math.floor(progress);
          if(progress&lt;25){
              var angle = -90 + (progress/100)*360;
              $(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
          }
          else if(progress&gt;=25 &amp;&amp; progress&lt;50){
              var angle = -90 + ((progress-25)/100)*360;
              $(".animate-0-25-b").css("transform","rotate(0deg)");
              $(".animate-25-50-b").css("transform","rotate("+angle+"deg)");
          }
          else if(progress&gt;=50 &amp;&amp; progress&lt;75){
              var angle = -90 + ((progress-50)/100)*360;
              $(".animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
              $(".animate-50-75-b").css("transform","rotate("+angle+"deg)");
          }
          else if(progress&gt;=75 &amp;&amp; progress&lt;=100){
              var angle = -90 + ((progress-75)/100)*360;
              $(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b")
                                                    .css("transform","rotate(0deg)");
              $(".animate-75-100-b").css("transform","rotate("+angle+"deg)");
          }
          $(".text").html(progress+"%");
      }`
  </code></pre>
  
  <p>I want to create 3 different circles but with different values, for example the fist to stop at 35% the second one at 50% and the third one at 100% how can I do this ?</p>
  
  <p>To not put here the entire markup I will show you a fiddle to see it in action.
  Here is the <a href="http://jsfiddle.net/Q4E5c/" rel="nofollow">fiddle</a></p>