JSFiddle - React, Tailwind, and code Playground

by Vikas

HTML

<div class="container">
 <div class="spinner">
 
 </div>
 <div class="spinner2"></div>
</div>

CSS

.spinner {
  position: absolute;
  height: 20px;
  width: 20px;
  /*  border-top: 1px solid black; */
 /*  border-right: 1px solid black; */
  border-bottom: 1px solid black;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  /*  transition:  1s; */
}

.spinner2 {
  position: absolute;
  height: 20px;
  width: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
  /*  transition:  1s; */
}

.container:hover .spinner {
  background-color: green;
  transform: rotate(360deg);
  border-top: none;
}


.spinner:nth-child(1){
  animation-delay: -0.3s;
}

@keyframes rotate {
  0% {
    /*  background-color: green; */
   transform: rotate(0deg);
    /*   border-top: none; */
  }

  50% {
   
    /*  background-color: green; */
   transform: rotate(180deg); 
   /*  border-top: 1px solid black; */
    /*   border-top: none; */
  }

  100% {
    /*  background-color: green; */
   transform: rotate(360deg);
    /*   border-top: none; */
  }

}