Scroll Progress Ring

Circular SVG progress ring with a live percentage, filled by scroll.

How to use it

Paste the HTML where the scroll effects should appear. Include the script tags at the top once per page.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Scroll Progress Ring · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<div class="jouw-container">
<div class="spr-wrap"><svg class="spr-svg" viewBox="0 0 120 120"><circle class="spr-bg" cx="60" cy="60" r="52"/><circle class="spr-fg" cx="60" cy="60" r="52"/></svg><div class="spr-num">0%</div></div>
</div>

/* Scroll Progress Ring · NedDev · eigen werk. */
.spr-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;font-family:'Boldonse','Switzer',sans-serif}
.spr-svg{width:min(46%,180px);height:auto;transform:rotate(-90deg)}.spr-bg{fill:none;stroke:#eee;stroke-width:8}
.spr-fg{fill:none;stroke:#F5480F;stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7}
.spr-num{position:absolute;font-weight:900;font-size:clamp(22px,5vw,40px);color:#0a0a0a;letter-spacing:-.02em}

// Scroll Progress Ring · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var fg=root.querySelector('.spr-fg');var num=root.querySelector('.spr-num');var C=326.7;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function set(p){fg.style.strokeDashoffset=C*(1-p);num.textContent=Math.round(p*100)+'%';}
if(rm){set(1);return;}
if(window.ScrollTrigger){window.ScrollTrigger.create({trigger:root,start:'top 90%',end:'bottom 30%',scrub:true,onUpdate:function(self){set(self.progress);}});}else{var i=0;var iv=setInterval(function(){i+=.02;set(Math.min(i,1));if(i>=1)clearInterval(iv);},20);}
}
init(document.querySelector('.jouw-container'));

More scroll effects

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →