JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div style="position:relative; width: 400px; height:100px; background-color:grey;">
<div class="ajax-spinner theme-white"><svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" class="loader"><circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" class="path"></circle></svg></div>
</div>

SCSS

.ajax-spinner{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(.45);
    display: block;
    width: 100px;
    height: 100px;
    
    .loader {
      animation: rotator 1.4s linear infinite;
      width: 100%;
      height: 100%;
      
      .path {
         stroke: #2f3132;
         stroke-dasharray: 187;
         stroke-dashoffset: 0;
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-animation: dash 1.4s ease-in-out infinite;
        animation: dash 1.4s ease-in-out infinite;
      }
    }
    
    &.theme-white {
      .loader .path { stroke: #fff;}
    }
}


@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 47;
        transform: rotate(135deg)
    }
    to {
        stroke-dashoffset: 187;
        transform: rotate(450deg)
    }
}