JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="chart__circle" width="240" height="240" xmlns="http://www.w3.org/2000/svg">
  <circle class="chart__progress chart__progress--animated" r="90" cy="120" cx="120" stroke-width="4" stroke="url(#gradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle>
  
  <defs>
    <linearGradient id="gradient" x1="50%" y1="0%" x2="0%" y2="50%">
      <stop offset="0%" stop-color="#f0080" stop-opacity="0"></stop>
      <stop offset="100%" stop-color="#f00808"></stop>
    </linearGradient>
  </defs>
</svg>

CSS

body {
  background-color: #000;
}