JSFiddle - React, Tailwind, and code Playground

by Viet27th

HTML

<div class="circle1"></div>
<div class="circle2"></div>

CSS

.circle1 {
-webkit-animation: 1s ease-in-out 0s normal none infinite running spinPulse;
animation: 1s ease-in-out 0s normal none infinite running spinPulse;
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 39, 0, 0.9) rgba(0, 0, 0, 0);
border-image: none;
border-radius: 50px;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 35px #006400;
height: 50px;
margin: -25px 0 0 -25px;
opacity: 0.9;
width: 50px;
position: absolute;
top: 45%;
left: 50%;
z-index: 9999;
}
@keyframes spinPulse {
    0% {
      box-shadow: 0 0 1px #006400;
      opacity: 0;
      transform: rotate(160deg);
  }
  50% {
      opacity: 1;
      transform: rotate(145deg);
  }
  100% {
      opacity: 0;
      transform: rotate(-320deg);
  }
}

.circle2 {
-webkit-animation: 1s linear 0s normal none infinite running spinoffPulse;
animation: 1s linear 0s normal none infinite running spinoffPulse;
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 39, 0, 0.9) rgba(0, 0, 0, 0);
border-image: none;
border-radius: 50px;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 15px #006400;
height: 30px;
margin: -15px 0 0 -15px;
opacity: 0.9;
position: absolute;
width: 30px;
top: 45%;
left: 50%;
z-index: 9999;
}

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