JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div style="width: 100%; height: 200px;">
  <div style="width: 33.3%; height: 200px; float:left; background-color: #222; position: relative;">
  	<div style="position: absolute; top:3px;left:3px; color: #eee; font-size: 11px;">normal</div>
   
    <div class="loader" id="one" style="width: 70px; height: 70px; top: 57px;left: 74px;">
            <div class="loader-bg" style="border-width: 7px;">
                <div class="text" style="font-size: 16px; 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: 7px;"></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: 7px;"></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: 7px;"></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: 7px;"></div>
                            </div>
                    </div>
            
        </div>
    
    
  </div>
  <div style="width: 33.3%; height: 200px; float:left; background-color: #fff; position: relative;">
  	<div style="position: absolute; top:3px;left:3px; color: #667; font-size: 11px;">border-color: rgba(0, 0, 0, 0.2);</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 rgba(255, 255, 255, 0.1);
    -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 rgba(255, 255, 255, 0.3);
    -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%...

JavaScript

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

    }
    $("#" + id + " .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)");
}
  
 renderProgress(35, 'one');
 renderProgress(50, 'two');
 renderProgress(100, 'three');