JSFiddle - React, Tailwind, and code Playground

HTML

<div id="r2">
<div id="r1" class="ring"></div>
</div>

CSS

#r2{
      background-color: blue;
         width: 500px;
    height: 500px;
}
.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
    border: 30px rgb(197,165,42) solid;
    -webkit-animation-name: ani; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-direction: forward;
   
}

@-webkit-keyframes ani {
    0% {-webkit-transform: scale(0); opacity: 0;}
    10% {-webkit-transform: scale(0.1); opacity: 0.2;}
    20% {-webkit-transform: scale(0.2); opacity: 0.4;}
    30% {-webkit-transform: scale(0.3); opacity: 0.6;}
    40% {-webkit-transform: scale(0.4); opacity: 0.8;}
    50% {-webkit-transform: scale(0.5); opacity: 1;}
    60% {-webkit-transform: scale(0.6); opacity: 0.8;}
    70% {-webkit-transform: scale(0.7); opacity: 0.6;}
    80% {-webkit-transform: scale(0.8); opacity: 0.4;}
    90% {-webkit-transform: scale(0.9); opacity: 0.2;}
    99.9% {-webkit-transform: scale(0.99); opacity: 0.1} 
    100% {-webkit-transform: scale(0); opacity: 0} 
}

#r2 { -webkit-animation-delay: 2s;}