JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="Stage_box1" class="Stage_box1_id" style="position: absolute; margin: 0px; left: 50px; top: 0px; width: 300px; height: 300px; right: auto; bottom: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0px);">
  <div id="Stage_box1_svg_container" class="Stage_box1_svg_container_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 100%; height: 100%; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgba(255, 255, 255, 0);"><svg version="1.1" id="chart0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"><defs><linearGradient id="lg0" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">    <stop offset="0%" stop-color="#3081b9" stop-opacity="1"></stop>    <stop offset="100%" stop-color="#49dbe8" stop-opacity="1"></stop></linearGradient></defs><g class="svg_g">   <path class="full_donut" d="M 150, 150 m -80, 0 a 80,80 0 1,1 160,0 a 80,80 0 1,1 -160,0 Z" stroke-linecap="round" stroke-width="26px" fill="none" stroke="#eef0f0"></path>   <path class="ani_donut run_animation0" d="M 150, 150 m -80, 0 a 80,80 0 1,1 160,0 a 80,80 0 1,1 -160,0 Z" stroke-linecap="round" stroke-width="26px" fill="none" stroke="url(#lg0)"></path></g></svg></div>
  <div
    id="Stage_box1_number" class="Stage_box1_number_id" style="position: absolute; margin: 0px; left: 10%; top: 125px; width: 80%; height: auto; right: auto; bottom: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: open-sans, sans-serif; font-size: 40px; color: rgb(34, 34, 34); font-weight: 400; text-decoration: none; text-align: center;"><span class="number"><strong>50</strong><span>%</span></span>
</div>
<div id="Stage_box1_text" class="Stage_box1_text_id" style="position: absolute; margin: 0px; left: 15%; top: 252px; width: 70%; height: auto;...

CSS

#chart0 .ani_donut {
  stroke-dasharray: 502.72552490234375 9999;
  stroke-dashoffset: 502.72552490234375;
}

.run_animation0 {
  -webkit-animation: ani0 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 0.5s;
  -moz-animation: ani0 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 0.5s;
  -o-animation: ani0 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 0.5s;
  animation: ani0 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 0.5s;
}

@-webkit-keyframes ani0 {
  from {
    stroke-dashoffset: 502.72552490234375;
  }
  to {
    stroke-dashoffset: 326.77159118652344;
  }
}

@-moz-keyframes ani0 {
  from {
    stroke-dashoffset: 502.72552490234375;
  }
  to {
    stroke-dashoffset: 326.77159118652344;
  }
}

@-o-keyframes ani0 {
  from {
    stroke-dashoffset: 502.72552490234375;
  }
  to {
    stroke-dashoffset: 326.77159118652344;
  }
}

@keyframes ani0 {
  from {
    stroke-dashoffset: 502.72552490234375;
  }
  to {
    stroke-dashoffset: 326.77159118652344;
  }
}

#Stage_box1_svg_container {
  -webkit-transform: rotate(-35.999999999999986deg);
  -webkit-transform-origin: 150px 150px;
  -moz-transform: rotate(-35.999999999999986deg);
  -moz-transform-origin: 150px 150px;
  -o-transform: rotate(-35.999999999999986deg);
  -o-transform-origin: 150px 150px;
  transform: rotate(-35.999999999999986deg);
  transform-origin: 150px 150px;
}