javascript - 多圈进度条

Question

我正在使用一个脚本来创建一些圆形进度条。 下面是一些用于创建它们的标记:

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

这是一些 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+"%");
    }`

我想创建 3 个不同的圆圈，但具有不同的值，例如第一个在 35% 时停止，第二个在 50% 时停止，第三个在 100% 时停止，我该怎么做？

为了不将整个标记放在这里，我将向您展示一个 fiddle 以查看它的实际效果。这是 fiddle

Answer 1

检查一下

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);