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