CodePen Embed - Circular Progress Indicator

Live

 
<button>restart progress animation</button>
<div class="progress-elem" style="max-width: 110px; margin: 40px 60px;">
  <svg style="transform: rotate(90deg)" height="100%" viewBox="0 0 110 110" width="100%" style="overflow: visible;">
    <!-- gray dashed -->
    <circle cx="50%" cy="50%" fill="none" stroke-width="20" r="40" stroke="#D4D4D8" stroke-dasharray="1.4137,1.4137"></circle>
    <!-- green solid -->
    <circle class="progress-bar" cx="50%" cy="50%" fill="none" stroke-width="20" r="40" stroke="#19C558" style="stroke-dashoffset: 251.3274; stroke-dasharray: 251.3274;"></circle>
    <!-- inner black stroke -->
    <circle cx="50%" cy="50%" fill="none" stroke-width="1.5" r="27.5" stroke="#27272A"></circle>
    <!-- outer black stroke -->
    <circle cx="50%" cy="50%" fill="none" stroke-width="1.5" r="52.5" stroke="#27272A"></circle>
    <g class="success" style="display:none;">
      <!-- inner solid green success -->
      <circle cx="50%" cy="50%" fill="#19C558" r="50"></circle>
      <!-- checkmark line -->
      <polyline points="52 74, 65 60, 40 36" stroke="#fff" fill="none" stroke-width="10" />
    </g>
  </svg>
  <div class="progress-text-container">
    <div class="progress-text">
      <span class="progress-text-inner">0</span><span class="progress-text-percent">%</span>
    </div>
  </div>
</div>

Live

​x
 
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-variant-numeric: tabular-nums;
}
​
button {
  padding: 4px 10px 5px;
  font-size: 20px;
}
​
.progress-elem {
  position: relative;
}
​
.progress-text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  color: #27272A;
}
​
.progress-text {
  position: relative;
  top: -3px;
  right: -2px;
}
​
.progress-text-inner {
  
}
​
.progress-text-percent {
  font-size: 17px;
}

Live

xxxxxxxxxx
 
let progressElem = document.querySelector(".progress-elem");
let progressElemSvg = document.querySelector(".progress-elem svg");
let progressBar = document.querySelector(".progress-bar");
let success = document.querySelector(".success");
let progressTextContainer = document.querySelector(".progress-text-container");
let progressTextInner = document.querySelector(".progress-text-inner");
​
let interval;
function startAnimation () {
  clearInterval(interval);
  progressTextInner.innerHTML = 0;
  progressTextContainer.style.display = "";
  success.style.display = "none";
  
  let initial = 251.3274;
  let increment = 251.3274 / 100;
  let incrementCount = 0;
  interval = setInterval(() => {
    if (incrementCount === 100) {
      initial = 0;
      progressBar.style.strokeDashoffset = initial;
      clearInterval(interval);
      setTimeout(() => {
        progressTextContainer.style.display = "none";
        success.style.display = "";
      }, 100);
    } else {
      initial -= increment;
      progressBar.style.strokeDashoffset = initial;
      incrementCount += 1;
​
      if (incrementCount !== 100) {
        progressTextInner.innerHTML = incrementCount;
      }
    }
  }, 50);
}
​
startAnimation();
​
document.querySelector("button").addEventListener("click", () => {
  startAnimation();
});

This Pen is owned by David Miranda on CodePen.

See more by @panphora on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.