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% で停止し、2 つ目は 50% で、3 つ目は 100% で停止します。どうすればよいですか?

マークアップ全体をここに記載しないために、動作を確認するためのフィドルを示します。ここにフィドルがあります