JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="progressbar-container">
  <div class="progressbar progressbar-70"></div>
  <div class="progressbar-display">
    <div class="progressbar-value">70%</div>
  </div>
</div>

CSS

.progressbar-container {
  height: 74px;
  position: relative;
  width: 74px;
}
.progressbar-container:hover .progressbar:after {
  margin: 2px;
  height: 66px;
  width: 66px;
}
.progressbar-container .progressbar {
  height: 70px;
  border: 2px solid #e7e9e5;
  box-sizing: content-box;
  position: relative;
  width: 70px;
  animation: fill 0.3s;
}
.progressbar-container .progressbar,
.progressbar-container .progressbar:after {
  border-radius: 50%;
}
.progressbar-container .progressbar:after {
  background: #e7e9e5;
  content: "";
  left: 0;
  margin: 5px;
  position: absolute;
  height: 60px;
  transition: all 0.3s;
  width: 60px;
}
.progressbar-container .progressbar.progressbar-pie {
  background-color: #0ead98;
  border: 1px solid #0ead98;
  animation-name: fill;
  animation-duration: 1s;
}
.progressbar-container .progressbar.progressbar-pie.progressbar-0 {
  background-image: linear-gradient(90deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent 50%);
}
.progressbar-container .progressbar.progressbar-pie.progressbar-1 {
  background-image: linear-gradient(93.6deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent 50%);
}
.progressbar-container .progressbar.progressbar-pie.progressbar-2 {
  background-image: linear-gradient(97.2deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent 50%);
}
.progressbar-container .progressbar.progressbar-pie.progressbar-3 {
  background-image: linear-gradient(100.8deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent 50%);
}
.progressbar-container .progressbar.progressbar-pie.progressbar-4 {
  background-image: linear-gradient(104.4deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent 50%);
}
.progressbar-container .progressbar.progressbar-pie.progressbar-5 {
  background-image: linear-gradient(108deg, transparent 50%, #e7e9e5 50%), linear-gradient(90deg, #e7e9e5 50%, transparent...