JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<div class="circle-wrap">
  <div class="circle">
    <div class="mask half">
      <div class="fill"></div>
    </div>

  </div>
</div>

CSS

/* https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda */

body {
  font-family: "Roboto", sans-serif;
  background:#d2eaf1;
}

.circle-wrap {
  margin: 150px auto;
  width: 150px;
  height: 150px;
  background: #fefcff;
  border-radius: 50%;
  border: 1px solid #cdcbd0;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: green; /* #227ded;*/
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.mask.full,
.circle .fill {
  xanimation: fill ease-in-out 3s;
  transform: rotate(90deg);
}

@keyframes fill{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}