Simple markup

  <!-- Radial version --> <div class="radial-progress"> <svg class="radial-svg" width="50" height="50" transform="rotate(-90 0 0)"> <circle class="radial-fill" stroke-width="5" r="14" cx="20" cy="20"></circle> </svg> </div> <!-- Linear version --> <div class="linear-progress"> <div class="bar"></div> </div>  

Create a callback to update the bars

  const bar = document.querySelector(".bar"); const svg = document.querySelector("svg"); const circle = svg.querySelector("circle"); const r = circle.getAttribute("r"); const circ = 2 * Math.PI * r; // callback to update the progress bars function update(data) { const pos = 1 - ((data.max - data.scrolled) / data.max); // update radial progress bar circle.style.strokeDashoffset = circ - (circ * pos); // update linear progress bar bar.style.transform = `scale(${pos}, 1)`; }  

Use the callback in the config...

  const pages = new Pageable("main", { onScroll: update, });  

...or use the built-in event emitter

  const pages = new Pageable("main"); pages.on("scroll", update);