JSFiddle - React, Tailwind, and code Playground

by artofbw

HTML

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

CSS

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

JavaScript

$(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);
    
});