Animated semicircular progress bar chart using SVG

HTML

              
                <div class="container">
  <!-- SVG shadow effect filter created with the 'PhotoShop DropShadows Using SVG Filters' tool created by Michael Mullany https://codepen.io/mullany/pen/xxPOoX -->
  <svg width="278" height="89" viewBox="0 0 278 89" fill="none" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <clipPath id="cutoff" width="278" height="89">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M138.667 8C81.866 8 32.5209 39.9483 7.63237 86.8742C6.59727 88.8259 4.17604 89.5688 2.22442 88.5337C0.272787 87.4986 -0.470204 85.0774 0.5649 83.1258C26.7857 33.688 78.7889 0 138.667 0C198.545 0 250.548 33.688 276.769 83.1258C277.804 85.0774 277.061 87.4986 275.109 88.5337C273.157 89.5688 270.736 88.8259 269.701 86.8742C244.812 39.9483 195.467 8 138.667 8Z"/>
      </clipPath>
    </defs>

    <filter id="big-shadow">

      <!-- Take source alpha, offset it by angle/distance and blur it by size -->
      <feOffset id="offset" in="SourceAlpha" dx="0" dy="0" result="SA-offset" />
      <feGaussianBlur id="blur" in="SA-offset" stdDeviation="40" result="SA-o-blur" />

      <!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

      <feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
        <feFuncA id="contour" type="table" tableValues="0 40" />
      </feComponentTransfer>

      <feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont" />

      <!-- Adjust the spread by multiplying alpha by a constant factor -->
      <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
        <feFuncA id="spread-ctrl" type="linear" slope="11" />
      </feComponentTransfer>

      <!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
      <feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="SA-o-b-c-s-recolor" />

      <!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
      <feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98" />
      <feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise" />
      <feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0" k2="1" result="SA-o-b-c-s-r-mix" />

      <!-- Merge the shadow with the original -->
      <feMerge>
        <feMergeNode in="SA-o-b-c-s-r-mix" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    
    <path id="chart-path" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#62676F" stroke-width="8" stroke-linecap="round" />
    <path id="chart-progress" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#FCBC2C" stroke-width="8" stroke-linecap="round" filter="url(#big-shadow)" clip-path="url(#cutoff)" />
  </svg>
  <div class="balance-container">
    <span class="label">Available to spend</span>
    <span class="amount">£<span class="countup" data-end-value="1000000" data-duration="1200"></span>
</span>
  </div>
</div>

<div class="container">
  <svg width="278" height="89" viewBox="0 0 278 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <defs>
      <clipPath id="cutoff" width="278" height="89">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M138.667 8C81.866 8 32.5209 39.9483 7.63237 86.8742C6.59727 88.8259 4.17604 89.5688 2.22442 88.5337C0.272787 87.4986 -0.470204 85.0774 0.5649 83.1258C26.7857 33.688 78.7889 0 138.667 0C198.545 0 250.548 33.688 276.769 83.1258C277.804 85.0774 277.061 87.4986 275.109 88.5337C273.157 89.5688 270.736 88.8259 269.701 86.8742C244.812 39.9483 195.467 8 138.667 8Z"/>
      </clipPath>
    </defs>

    <filter id="big-shadow">

      <!-- Take source alpha, offset it by angle/distance and blur it by size -->
      <feOffset id="offset" in="SourceAlpha" dx="0" dy="0" result="SA-offset" />
      <feGaussianBlur id="blur" in="SA-offset" stdDeviation="40" result="SA-o-blur" />

      <!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

      <feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
        <feFuncA id="contour" type="table" tableValues="0 40" />
      </feComponentTransfer>

      <feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont" />

      <!-- Adjust the spread by multiplying alpha by a constant factor -->
      <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
        <feFuncA id="spread-ctrl" type="linear" slope="11" />
      </feComponentTransfer>

      <!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
      <feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="SA-o-b-c-s-recolor" />

      <!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
      <feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98" />
      <feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise" />
      <feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0" k2="1" result="SA-o-b-c-s-r-mix" />

      <!-- Merge the shadow with the original -->
      <feMerge>
        <feMergeNode in="SA-o-b-c-s-r-mix" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    
    <path id="chart-path" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#62676F" stroke-width="8" stroke-linecap="round" />
    <path id="chart-progress1" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#2DB023" stroke-width="8" stroke-linecap="round" filter="url(#big-shadow)" clip-path="url(#cutoff)" />
    <path id="chart-progress2" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#FCBC2C" stroke-width="8" stroke-linecap="round" filter="url(#big-shadow)" clip-path="url(#cutoff)" />
  </svg>
  <div class="balance-container">
    <span class="label">Available to spend</span>
    <span class="amount2">£<span class="countup" data-end-value="1000000" data-duration="1200"></span>
</span>
  </div>
</div>

<div class="toggle-switch">
  <input type="checkbox" id="animation-toggle" name="animation-toggle" checked>
  <label for="animation-toggle">Couting up animation</label>
</div>

<button id="restart-button" class="restart-btn">Restart Animations</button>

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Inter:wght@300;400;500&display=swap');

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: auto;
  height: 100vh;
  background-color: #000813;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 32px;
}

svg {
  fill: none;
  position: absolute;
  z-index: -1;
}

.balance-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px;
}

.label {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #b3b5b9;
  margin-bottom: 4px;
}

.amount,
.amount2 {
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  font-style: normal;
  color: #fcbc2c;
  transition: opacity 1.2s linear;

  &.amount2 {
    color: #fff;
  }
  
  .countup {
  font-weight: 300;
  font-size: 32px;
  line-height: 40px;
}

  .integer-part {
    /* Inherit from the countup style */
  }

  .decimal-part {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
  }
}

.restart-btn {
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #fff;
  border: none;
  border-radius: 999px;
  color: #000814;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}

.toggle-switch {
  margin: 20px;
  display: flex;
  align-items: center;
  color: #fff;
}

.toggle-switch input[type="checkbox"] {
  margin-right: 10px;
}

JS

              
                // progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

// Initialize Progress Bars
var path1 = new ProgressBar.Path(document.getElementById('chart-progress'), { duration: 3000, easing: 'easeInOut' });
var path2 = new ProgressBar.Path(document.getElementById('chart-progress1'), { duration: 3000, easing: 'easeInOut' });
var path3 = new ProgressBar.Path(document.getElementById('chart-progress2'), { duration: 3000, easing: 'easeInOut' });

// Set the percentage completeness for the progress bars
function initializeProgressBars() {
  path1.set(0); path1.animate(0.8);
  path2.set(0); path2.animate(1);
  path3.set(0); path3.animate(0.3);
}

// Check if the countingup animation is to be applied
function applyCurrentAnimation() {
  if (document.getElementById('animation-toggle').checked) {
    restartCountUpAnimation();
  } else {
    restartFadeInAnimation();
  }
}

// Restart the animations when called
function restartAnimations() {
  initializeProgressBars();
  if (document.getElementById('animation-toggle').checked) {
    restartCountUpAnimation();
  } else {
    restartFadeInAnimation();
  }
}

function restartCountUpAnimation() {
    document.querySelectorAll('.countup').forEach(el => {
        // Set the end value is 1000000, duration is 1200ms, and 2 decimal places
        animateCountUp(el, 0, 150000, 3000, 2);
    });
}

function restartFadeInAnimation() {
  document.querySelectorAll('.amount, .amount2').forEach(el => {
    el.style.opacity = 0;
    setTimeout(() => {
      el.style.opacity = 1;
    }, 100); // The transition will apply here
  });
}

// Listen for when the restart animation button is pressed
document.getElementById('restart-button').addEventListener('click', restartAnimations);

window.onload = function() {
  initializeProgressBars();
  if (document.getElementById('animation-toggle').checked) {
    restartCountUpAnimation();
  }
};

// Apply commas to large numbers to two decimal places
function numberWithCommas(x) {
    return x.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// Animate the amount to count up
// Animate the amount to count up with ease-in-out
function animateCountUp(el, start, end, duration, decimalPlaces = 2) {
    let startTime = null;

    // Ease-in-out cubic function
    function easeInOutCubic(t) {
        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    }

    function update(currentTime) {
        if (!startTime) startTime = currentTime;
        const elapsedTime = currentTime - startTime;
        const progress = easeInOutCubic(elapsedTime / duration);

        const current = start + (end - start) * progress;
        const currentDisplay = Math.min(current, end);

        // Update the element's content
        let parts = numberWithCommas(Number(currentDisplay.toFixed(decimalPlaces))).split('.');
        el.innerHTML = `<span class="integer-part">${parts[0]}</span>.<span class="decimal-part">${parts[1]}</span>`;

        // Continue the animation as long as elapsedTime is less than duration
        if (elapsedTime < duration) {
            requestAnimationFrame(update);
        }
    }

    requestAnimationFrame(update);
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions