multiple circle progress bars

Question

I'm using a script for creating some round progress bars. Here is some markup for creating them:

<div class="loader">
<div class="loader-bg">
    <div class="text"></div>
</div>        
<div class="spiner-holder-one animate-0-25-a">
    <div class="spiner-holder-two animate-0-25-b">
        <div class="loader-spiner" style=""></div>
    </div>
</div>
<div class="spiner-holder-one animate-25-50-a">
    <div class="spiner-holder-two animate-25-50-b">
        <div class="loader-spiner"></div>
    </div>
</div>
<div class="spiner-holder-one animate-50-75-a">
    <div class="spiner-holder-two animate-50-75-b">
        <div class="loader-spiner"></div>
    </div>
</div>
<div class="spiner-holder-one animate-75-100-a">
    <div class="spiner-holder-two animate-75-100-b">
        <div class="loader-spiner"></div>
    </div>
</div>

this is some js :

    function renderProgress(progress)
    {
        progress = Math.floor(progress);
        if(progress<25){
            var angle = -90 + (progress/100)*360;
            $(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progress>=25 && progress<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>=50 && progress<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>=75 && progress<=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+"%");
    }`

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 ?

To not put here the entire markup I will show you a fiddle to see it in action. Here is the fiddle

Answer 1

Check this out

http://jsfiddle.net/Q4E5c/8/

function renderProgress(progress, target, max) {
    progress = Math.floor(progress);
    if (progress <= max) {
        if (progress < 25) {
            var angle = -90 + (progress / 100) * 360;
            $(target).find(".animate-0-25-b").css("transform", "rotate(" + angle + "deg)");
        } else if (progress >= 25 && progress < 50) {
            var angle = -90 + ((progress - 25) / 100) * 360;
            $(target).find(".animate-0-25-b").css("transform", "rotate(0deg)");
            $(target).find(".animate-25-50-b").css("transform", "rotate(" + angle + "deg)");
        } else if (progress >= 50 && progress < 75) {
            var angle = -90 + ((progress - 50) / 100) * 360;
            $(target).find(".animate-25-50-b, .animate-0-25-b").css("transform", "rotate(0deg)");
            $(target).find(".animate-50-75-b").css("transform", "rotate(" + angle + "deg)");
        } else if (progress >= 75 && progress <= 100) {
            var angle = -90 + ((progress - 75) / 100) * 360;
            $(target).find(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform", "rotate(0deg)");
            $(target).find(".animate-75-100-b").css("transform", "rotate(" + angle + "deg)");
        }
        if (progress == 100) {

        }
        $(target).find(".text").html(progress + "%");
    }
}

function clearProgress(target) {
    $(target).find(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform", "rotate(90deg)");
}

var i = 0;
setInterval(function () {
    i++;
    if (i > 100) {
        i = 0
        clearProgress($("#progress-1"));
    }
    renderProgress(i, $("#progress-1"), 100);
}, 200);

var j = 0
setInterval(function () {
    j++;
    if (j > 100) {
        j = 0
        clearProgress($("#progress-2"));
    }
    renderProgress(i, $("#progress-2"), 80);
}, 200);

var k = 0
setInterval(function () {
    k++;
    if (k > 100) {
        k = 0
        clearProgress($("#progress-3"));
    }
    renderProgress(k, $("#progress-3"), 25);
}, 200);