JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<div style="width:200px; height:200px">
  <svg viewBox="0 0 100 100">
  <path class="el-progress-circle__track" d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" stroke="#e5e9f2" stroke-width="10" fill="none"></path>
  <path class="el-progress-circle__path" d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" stroke-linecap="round" stroke="#8e71c7" stroke-width="3" fill="none" style="stroke-dasharray: 299.08px, 299.08px; stroke-dashoffset:0px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;"></path>
</svg>
</div>

CSS

.el-progress-circle__track{
  background:#CCC;
}

.el-progress-circle__path{
  background:#222
}