Scroll Progress Ring

<!-- 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'));