JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
  </head>

  <body>
    <svg width="100" height="100">
    <g>
      <circle class="progress" r="40" cx="50" cy="50" fill="none" />
    </g>
  </svg>
  </body>

</html>

CSS

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
}

@keyframes progress-indef {
  0% {
    stroke-dashoffset: 251;
  }
  100% {
    stroke-dashoffset: 0;
  }
}