JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="container">
    <div class="quarterCircleTopLeft"></div>
    <div class="quarterCircleTopRight"></div>      
    <div class="quarterCircleBottomRight"></div>
    <div class="quarterCircleBottomLeft"></div>
</div>

CSS

.container{
    width:205px;
    padding:10px;
}

.animation{
     background-color:blue !important;
     transition-property:all;
	 -moz-transition-property: all; /* Firefox 4 */
	 -webkit-transition-property:all; /* Safari and Chrome */
	 -o-transition-property:all; /* Opera */
     transition-duration: 0.5s;
	 -webkit-transition-duration: 0.5s; /* Safari */
	 transition-timing-function: linear;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
}

.quarterCircleTopLeft{
     width:100px; 
     height:100px; 
     background: orange;
     border-radius: 100px 0 0 0;
     display:inline-block;
     transition-property:all;
	 -moz-transition-property: all; /* Firefox 4 */
	 -webkit-transition-property:all; /* Safari and Chrome */
	 -o-transition-property:all; /* Opera */
     transition-duration: 0.5s;
	 -webkit-transition-duration: 0.5s; /* Safari */
	 transition-timing-function: linear;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
}

.quarterCircleTopRight{
     width:100px; 
     height:100px; 
     background: orange;
     border-radius: 0 100px 0 0;
     display:inline-block;
     transition-property:all;
	 -moz-transition-property: all; /* Firefox 4 */
	 -webkit-transition-property:all; /* Safari and Chrome */
	 -o-transition-property:all; /* Opera */
     transition-duration: 0.5s;
	 -webkit-transition-duration: 0.5s; /* Safari */
	 transition-timing-function: linear;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
}

.quarterCircleBottomRight{
     width:100px; 
     height:100px; 
     background: orange;
     border-radius: 0 0 0 100px;
     display:inline-block;
     transition-property:all;
	 -moz-transition-property: all; /* Firefox 4 */
	 -webkit-transition-property:all; /* Safari and Chrome */
	 -o-transition-property:all; /* Opera */
     transition-duration: 0.5s;
	 -webkit-transition-duration: 0.5s; /* Safari */
	 transition-timing-function: linear;
	...

JavaScript

$( document ).ready(function() {
    var counter=1000;
    var i = 1;
    var flag = 1;

    for(i=1; i<counter; i++)
    {
        if(flag == 1)
        {
           $(".quarterCircleBottomLeft").removeClass("animation");
           $(".quarterCircleTopLeft").addClass("animation");
        }
        
        if(flag == 2)
        {
            $(".quarterCircleTopLeft").removeClass("animation");
            $(".quarterCircleTopRight").addClass("animation");
        }
        
        if(flag == 3)
        {
            $(".quarterCircleTopRight").removeClass("animation");
            $(".quarterCircleBottomRight").addClass("animation");
        }
        
        if(flag == 4)
        {
            $(".quarterCircleBottomRight").removeClass("animation");
            $(".quarterCircleBottomLeft").addClass("animation");
            flag=0;
        }
        flag++;
    }

});