JSFiddle - React, Tailwind, and code Playground

by Reshma S Raveendran

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="ani">
<circle cx="50" cy="50" r="22" stroke-width="6" stroke="#B3B3B3" stroke-dasharray="92 2 40 2" fill="none"   stroke-dashoffset="0" class="animate-1" >
</circle>
 <circle cx="50" cy="50" r="22" stroke-width="6" stroke="#666666" stroke-dasharray="92 44" fill="none" stroke-dashoffset="0" class="animate-1">
 </circle>
</svg>

<div class="loading-circle">
                    <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <path class="loading-circle__element loading-circle__element-small" x="-50" y="-50" d="M55,13.6705706 C72.8244755,16.0336336 86.5794206,31.3197197 86.5794206,49.8255255 C86.5794206,58.3674675 83.6484515,66.2232232 78.7397602,72.4391391 L88.3688312,82.0874875 C95.7066933,73.3754755 100.12967,62.1181181 100.12967,49.8255255 C100.12967,23.8132132 80.3248751,2.43663664 55,0.00660660661 L55,13.6705706 L55,13.6705706 Z"></path>
                            <path class="loading-circle__element loading-circle__element-big" x="-50" y="-50" d="M71.861039,79.1088088 C65.778022,83.6860861 58.2176823,86.3983984 50.0247752,86.3983984 C29.9216783,86.3983984 13.624975,70.0690691 13.624975,49.9257257 C13.624975,31.3334334 27.5087912,15.9906907 45.4545455,13.738038 L45.4545455,0.0828828829 C20.00999,2.3954955 0.0747252747,23.8276276 0.0747252747,49.9257257 C0.0747252747,77.5676677 22.4380619,99.9757758 50.0247752,99.9757758 C61.9617383,99.9757758 72.9202797,95.7794795 81.5125874,88.7795796 L71.861039,79.1088088 L71.861039,79.1088088 Z"></path>
                        </g>
                    </svg>
                </div>

<svg xmlns="http://www.w3.org/2000/svg"...

CSS

.ani {
  
}
.animate-1 {
   /* animation: animat 1.2s linear 0s infinite normal forwards running; */
   
   transform-origin: 50% 50%; 
}

@keyframes animat {
   0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
 
 
 


@-webkit-keyframes aem-spin-animation {
    0.00% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes aem-spin-animation {
    0.00% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.loading-circle {
    width: 44px;
    height: 44px;
    position: relative;
    /* -webkit-animation: aem-spin-animation 1s infinite;
    animation: aem-spin-animation 1s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear */
}

.loading-circle svg {
    width: 44px;
    height: 44px
}

.loading-circle__wrapper {
    width: 44px;
    height: 44px;
    padding-left: calc(50% - 33px);
    position: absolute;
    top: calc(50% - 33px)
}

.loading-circle__wrapper.loading-circle--isDark,.loading-circle__wrapper.loading-circle--isLight {
    width: 100%;
    height: 100%
}

.loading-circle__transition {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear
}

.loading-circle__transition--fast {
    -webkit-transition: opacity .4s ease-out;
    transition: opacity .4s ease-out
}

.loading-circle__transition--opaque {
    opacity: 1
}

.loading-circle__transition--translucent {
    opacity: .7
}

.loading-circle__percentage {
    display: none
}

.loading-circle__element {
    position: absolute
}

.loading-circle__element-big {
    fill: #666666;
}

.loading-circle__element-small {
    fill: #B3B3B3;
}

.loading-circle--isDark {
    background: #000
}

.loading-circle--isLight {
    background:...