JSFiddle - React, Tailwind, and code Playground

by Sreeraj Saseendran

HTML

<div class="a"  style="--rotate-val:20deg;">
  <div class="b">
  </div>
  <div class="c" ></div>
</div>

CSS

:root {
  --progress-width : 5px;
  --progress-main-width: 10px;
}
@keyframes rotates {
  from {
    transform: rotate(0deg);
  }
  to {
     transform: rotate(var(--rotate-val));
  }
}
.a {
width: 200px;
height: 200px;
border: var(--progress-main-width) solid gray;
position: relative;
/*border-radius: 50%;*/
}
.b,.c {
  position:absolute;
  width: calc((100% + var(--progress-main-width)) / 2);
  height:calc(100% + var(--progress-main-width));
  left: calc(-1 * var(--progress-main-width));
  top: calc(-1 * var(--progress-main-width));
  border: 5px solid green;
  /*border-radius: 50%;*/
}
.b {  
  animation: rotates 3s 1 forwards;
}
.c {
  border: 5px solid red;
}