Skip to content

Instantly share code, notes, and snippets.

@mrclay

mrclay/svg-progress.html

Created November 11, 2021 19:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrclay/c35e83ede1b11e38a7128ca1b4cbbfc3 to your computer and use it in GitHub Desktop.
Save mrclay/c35e83ede1b11e38a7128ca1b4cbbfc3 to your computer and use it in GitHub Desktop.
Download ZIP
Progress circle SVG with 0% at top
Raw
svg-progress.html
<body>
<svg viewBox="0 0 200 200" height="200">
<circle cx="100" cy="100" r="90" pathLength="1" transform="rotate(-90 100 100)" class="percentage" stroke-dashoffset="0.9"></circle>
</svg>
<p>
Set percentage:
<button type="button">0</button>
<button type="button">15</button>
<button type="button">50</button>
<button type="button">98</button>
<button type="button">100</button>
</p>
<style>
.percentage {
fill: none;
stroke: #1e9642;
stroke-dasharray: 1;
stroke-linecap: round;
stroke-width: 10;
transition: stroke-dashoffset 500ms;
}
</style>
<script>
function setPercentage(circle, percent) {
const dashOffset = 1 - (percent / 100);
circle.setAttribute('stroke-dashoffset', dashOffset);
}
document.addEventListener('click', e => {
if (e.target.tagName === 'BUTTON') {
const percent = Number(e.target.textContent);
const circle = document.querySelector('svg .percentage');
setPercentage(circle, percent);
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment