Chasing Progress

by k_sav

HTML

<div class="demo">
  <svg class="progress" height="500" width="500">
    <circle cx="260" cy="230" r="122" stroke="#e6e6e6" stroke-width="4" fill="white" />
    <circle  class="progress__value" cx="260" cy="230" r="122" stroke="#009900" stroke-width="5" opacity=".71" fill="#f9faff" stroke-dasharray="766.5486" stroke-dashoffset="766.5486" />
    <circle  class="progress__value__a" cx="260" cy="230" r="122" stroke="#ff3a00" stroke-width="5" opacity=".71" fill="#f9faff" stroke-dasharray="766.5486" stroke-dashoffset="766.5486" />
  </svg>
</div>

CSS

body {
  background-color: #f9faff;
  overflow: hidden;
}

.u-absoluteCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.u-flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-offscreen {
  position: absolute;
  left: -999em;
}

.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.progress {
  transform: rotate(-90deg);
}

.progress__value {
  stroke-dasharray: 766.5486;
  stroke-dashoffset: 0;
  animation: progress 39.86s linear infinite;
}

.progress__value__a {
  stroke-dasharray: 766.5486;
  stroke-dashoffset: 0;
  animation: progress 39.86s linear infinite;
}


@keyframes progress {
  0% {
    stroke-dasharray: 0 766.5486;
  }
}

JavaScript

var time = 10;
const selector = `.progress__value__a`
const progressBar = document.querySelector(selector)
progressBar.style.animationDelay = `${time*-1}s`