JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 85 85">
    <circle r="36" cx="42.5" cy="42.5"></circle>
  </svg>
<div id="countdown">
  <div id="countdown-number"></div>
</div>


<svg viewBox="0 0 85 85" style="width: 400px;">
    <circle r="36" cx="42.5" cy="42.5"></circle>
  </svg>
<div id="countdown">
  <div id="countdown-number"></div>
</div>

<svg viewBox="0 0 85 85" style="width: 600px;">
    <circle r="36" cx="42.5" cy="42.5"></circle>
  </svg>
<div id="countdown">
  <div id="countdown-number"></div>
</div>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

svg {
  width: 200px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 226;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 10;
  stroke: #ff7323;
  fill: none;
  animation: countdown 60s linear infinite forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: -226;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#countdown {
  position: fixed;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  font-size: 30px;
  font-weight: bold;
}

JavaScript

var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 60;

countdownNumberEl.textContent = countdown;

setInterval(function() {
  countdown = --countdown <= 0 ? 60 : countdown;

  countdownNumberEl.textContent = countdown;
}, 1000);