JSFiddle - React, Tailwind, and code Playground
HTML
<div class="progress-bar">
</div>
CSS
.progress-bar {
width: 200px;
height: 200px;
background-color: #f3f3f3;
border-radius: 50%;
}
.progress-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3498db;
border-radius: 50%;
}
@keyframes progress {
0% {
width: 0;
height: 0;
}
100% {
width: 100%;
height: 100%;
}
}
.progress-bar::before {
animation: progress 2s ease-out forwards;
}