JSFiddle - React, Tailwind, and code Playground

HTML

<body class="d-flex flex-column justify-content-center align-items-center">
  <div class="container h-50 w-100  d-flex justify-content-center align-items-center">

      <svg class="progress-ring 65" position="relative" width="120" height="120">
        <circle class="progress-ring__circle" fill="red" cx="60" cy="60" r="52" rd="65"/>
        <text position="absolute" x="35" y="70" fill="yellow" font-size="30">65%</text>
      </svg>

      <svg class="progress-ring" width="120" height="120">
        <circle class="progress-ring__circle" fill="red"  cx="60" cy="60" r="52" rd="50"/>
        <text position="absolute" x="35" y="70" fill="yellow" font-size="30">50%</text>
      </svg>
  </div>  
  <div class="row w-100 mx-auto d-flex justify-content-center">
    <button type="button" class="btn btn-outline-success btn-lg mr-2" > Run
      <button/>
      <button type="button" class="btn btn-outline-success btn-lg ml-2" > Not Progress
      <button/>
  </div>
</body>

SASS

body
  width: 100vw
  height: 500px
  background-color: black
  
  .progress-ring__circle
    transform-origin: center
    transform: rotate(-90deg)
    transition: stroke-dashoffset .7s

JavaScript

const circle = document.querySelectorAll('.progress-ring__circle');
const btn = document.getElementsByClassName('btn')

for (let num_svg = 0; num_svg < circle.length; num_svg++) {
	const circumference = 2 * Math.PI * circle[num_svg].r.baseVal.value;
  circle[num_svg].style.strokeDashoffset = circumference;
}

btn[0].addEventListener('click', function () {
	for (let num_svg = 0; num_svg < circle.length; num_svg++) {

		circle[num_svg].style.strokeWidth = "4";
		circle[num_svg].style.stroke = "white";
		const circumference = 2 * Math.PI * circle[num_svg].r.baseVal.value;
		circle[num_svg].style.strokeDasharray = `${circumference} ${circumference}`;
		const percent = +circle[num_svg].attributes.rd.value;
		circle[num_svg].style.strokeDashoffset = circumference - percent / 100 * circumference;

	}
});

btn[1].addEventListener('click', function () {
	for (let num_svg = 0; num_svg < circle.length; num_svg++) {
    const circumference = 2 * Math.PI * circle[num_svg].r.baseVal.value;
		circle[num_svg].style.strokeWidth = "0";

		circle[num_svg].style.strokeDashoffset = circumference;

	}
});