Radial progress bar doesn't change color

Question

I've found animated radial progress bar using CSS mostly. The main thing is I need to display 227%.

Animation I want to make is to change bar color after 100% and 200%. I've been trying to use .css and also .removeClass(loader-spiner) which is main class and .addClass (loader-spiner-100), also I've been trying to use .attr to add my own style but it outputs those are not functions or smth like that.

Can you help me with this, please?

http://jsfiddle.net/artofbw/qgqren9e/

$(document).ready(function () {

        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)");
        }
        if(progress==100) {
            alert('first');
        }
        if(progress==200) {
            alert('second');
        }
        if(progress==227){
            clearInterval(int);
        }
        $(".text").html(progress+"%");
    }

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

    var i=0;
    var int = setInterval(function (){
                    i++;
                    if(i>227) {
                        i=0
                        clearProgress();
                    }
                    renderProgress(i);
    }, 50);

});

Answer 1

The color of the circle is determined by the borderColor of the .loader-spiner . You can easily set this using something like $('.loader-spiner').css({'border-color': '#f00'}); . Here is an example (I also made a new variable progressRound to "reset" the loader-spinner):

 $(document).ready(function () { function renderProgress(progress) { progress = Math.floor(progress); var progressRound = progress; while(progressRound > 100){ progressRound -= 100; clearProgress(); } if(progressRound<25){ var angle = -90 + (progressRound/100)*360; $(".animate-0-25-b").css("transform","rotate("+angle+"deg)"); } else if(progressRound>=25 && progressRound<50){ var angle = -90 + ((progressRound-25)/100)*360; $(".animate-0-25-b").css("transform","rotate(0deg)"); $(".animate-25-50-b").css("transform","rotate("+angle+"deg)"); } else if(progressRound>=50 && progressRound<75){ var angle = -90 + ((progressRound-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(progressRound>=75 && progressRound<=100){ var angle = -90 + ((progressRound-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)"); } if(progress==100) { $(".loader-spiner").css({ "border-color": "#f00" }); } if(progress==200) { $(".loader-spiner").css({ "border-color": "#0f0" }); } if(progress==227){ clearInterval(int); } $(".text").html(progress+"%"); } function clearProgress() { $(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform","rotate(90deg)"); } var i=0; var int = setInterval(function (){ i++; if(i>227) { i=0 clearProgress(); } renderProgress(i); }, 50); });

 .loader{ position: relative; width: 50px; height: 50px; float:left; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-bg { width: 100%; height: 100%; border-radius: 50%; border: 5px solid #f7f7f7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .spiner-holder-1 { position: absolute; top:0; left:0; overflow: hidden; width: 50%; height: 50%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .spiner-holder-2 { position: absolute; top:0; left:0; overflow: hidden; width: 100%; height: 100%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-spiner { width: 200%; height: 200%; border-radius: 50%; border: 5px solid #66c1d1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-spiner-100 { width: 200%; height: 200%; border-radius: 50%; border: 5px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .animate-0-25-a { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform: rotate(90deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-0-25-b { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-25-50-a { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform: rotate(180deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-25-50-b { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-50-75-a { -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); transform: rotate(270deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-50-75-b { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; } .animate-75-100-a { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform: rotate(0deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .animate-75-100-b { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin: 100% 100%; } .text { text-align: center; padding-top:26%; font-size: 12px; color: #a1a5a5; font-family: 'aileronlight'; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="width: 100%; height: 200px;"> <div style="width: 33.3%; height: 200px; float:left; position: relative;"> <div class="loader" style="width: 100px; height: 100px; top: 47px;left: 67px;"> <div class="loader-bg" style="border-width: 10px;"> <div class="text" style="font-size: 22px; padding-top:32%;"></div> </div> <div class="spiner-holder-1 animate-0-25-a"> <div class="spiner-holder-2 animate-0-25-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-25-50-a"> <div class="spiner-holder-2 animate-25-50-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-50-75-a"> <div class="spiner-holder-2 animate-50-75-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-75-100-a"> <div class="spiner-holder-2 animate-75-100-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> </div> </div> </div>

Answer 2

Adding a second set of rules to accommodate for the progress being 100+ would allow you to essentially reset it, though it does add a bit more code.

Below is simply reusing your original set of rules after going over 100.

    else if(progress<125){
        var angle = -90 + (progress/100)*360;
        $(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
    }
    else if(progress>=125 && progress<150){
        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>=150 && progress<175){
        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>=175 && progress<=200){
        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)");
    }

Answer 3

Here is my solution ;)

 $(document).ready(function () { function renderProgress(progress) { progress = Math.floor(progress); if (progress < 25) { angle = -90 + (progress / 100) * 360; $(".animate-0-25-b").css(fillRotateStyles(angle)); } else if (progress >= 25 && progress < 50) { angle = -90 + ((progress - 25) / 100) * 360; $(".animate-0-25-b").css(fillRotateRestart(0)); $(".animate-25-50-b").css(fillRotateStyles(angle)); } else if (progress >= 50 && progress < 75) { var angle = -90 + ((progress - 50) / 100) * 360; $(".animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-50-75-b").css(fillRotateStyles(angle)); } else if (progress >= 75 && progress <= 100) { angle = -90 + ((progress - 75) / 100) * 360; $(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-75-100-b").css(fillRotateStyles(angle)); } else if (progress > 100 && progress <= 125) { angle = -90 + (progress / 100) * 360; $(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-100-125-b").css(fillRotateStyles(angle)); } else if (progress > 125 && progress <= 150) { angle = -90 + ((progress - 25) / 100) * 360; $(".animate-100-125, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-125-150-b").css(fillRotateStyles(angle)); } else if (progress > 150 && progress <= 175) { angle = -90 + ((progress - 50) / 100) * 360; $(".animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-150-175-b").css(fillRotateStyles(angle)); } else if (progress > 175 && progress <= 200) { angle = -90 + ((progress - 75) / 100) * 360; $(".animate-150-175, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-175-200-b").css(fillRotateStyles(angle)); } else if (progress > 200 && progress <= 225) { angle = -90 + (progress / 100) * 360; $(".animate-175-200-b, .animate-150-175-b, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-200-225-b").css(fillRotateStyles(angle)); } else if (progress > 225 && progress <= 250) { angle = -90 + ((progress - 25) / 100) * 360; $(".animate-200-225-b, .animate-175-200-b, .animate-150-175-b, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0)); $(".animate-225-250-b").css(fillRotateStyles(angle)); } if (progress == 227) { clearInterval(int); } $(".text").html(progress + "%"); } function clearProgress() { $(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(90)); } var i = 0; var int = setInterval(function () { i++; if (i > 227) { i = 0 clearProgress(); } renderProgress(i); }, 50); function fillRotateStyles(angle) { return { '-webkit-transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)', '-ms-transform': 'rotate(' + angle + 'deg)', '-o-transform': 'rotate(' + angle + 'deg)', 'transform': 'rotate(' + angle + 'deg)' }; } function fillRotateRestart(amount) { return { '-webkit-transform': 'rotate(' + amount + 'deg)', '-moz-transform': 'rotate(' + amount + 'deg)', '-ms-transform': 'rotate(' + amount + 'deg)', '-o-transform': 'rotate(' + amount + 'deg)', 'transform': 'rotate(' + amount + 'deg)' }; } });

 .loader { margin-top: 30px; margin-left: auto; margin-right: auto; position: relative; width: 100px; height: 100px; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-bg { width: 100%; height: 100%; border-radius: 50%; border: 5px solid #c6c6c6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .spiner-holder-1 { position: absolute; top: 0; left: 0; overflow: hidden; width: 50%; height: 50%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .spiner-holder-2 { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-spiner { width: 200%; height: 200%; border-radius: 50%; border: 5px solid #478792; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-spiner-100 { width: 200%; height: 200%; border-radius: 50%; border: 5px solid #66c1d1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .loader-spiner-200 { width: 200%; height: 200%; border-radius: 50%; border: 5px solid #478792; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .animate-0-25-a { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-0-25-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-25-50-a { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-25-50-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-50-75-a { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-50-75-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-75-100-a { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-75-100-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-100-125-a { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-100-125-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-125-150-a { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-125-150-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-150-175-a { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-150-175-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-175-200-a { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-175-200-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-200-225-a { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-200-225-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-225-250-a { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .animate-225-250-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .text { text-align: center; padding-top: 34%; font-size: 22px; color: #a1a5a5; font-family: 'aileronlight'; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="progress-bar"> <div> <div class="loader"> <div class="loader-bg" style="border-width: 10px;"> <div class="text"></div> </div> <div class="spiner-holder-1 animate-0-25-a"> <div class="spiner-holder-2 animate-0-25-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-25-50-a"> <div class="spiner-holder-2 animate-25-50-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-50-75-a"> <div class="spiner-holder-2 animate-50-75-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-75-100-a"> <div class="spiner-holder-2 animate-75-100-b"> <div class="loader-spiner" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-100-125-a"> <div class="spiner-holder-2 animate-100-125-b"> <div class="loader-spiner-100" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-125-150-a"> <div class="spiner-holder-2 animate-125-150-b"> <div class="loader-spiner-100" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-150-175-a"> <div class="spiner-holder-2 animate-150-175-b"> <div class="loader-spiner-100" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-175-200-a"> <div class="spiner-holder-2 animate-175-200-b"> <div class="loader-spiner-100" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-200-225-a"> <div class="spiner-holder-2 animate-200-225-b"> <div class="loader-spiner-200" style="border-width: 10px;"></div> </div> </div> <div class="spiner-holder-1 animate-225-250-a"> <div class="spiner-holder-2 animate-225-250-b"> <div class="loader-spiner-200" style="border-width: 10px;"></div> </div> </div> </div> </div> <!--/progress bar animation--> </div>