Multiple progress bar on the same page?

[geosigno]

Would it be possible to use 2 or more progress bars in the same page.

For example on a page with 3 articles, each one should have its progress bar. So if the first article is finish, the progress start again with the second . Also if you scroll up, then the progress bar adapt accordingly?

[jeremenichelli]

With the last version it's possible to create as many progress observers as you want, though right now it's not possible to add offsets so they track specific parts of the page, but it's something I'm working right now and expect to release soon.

[geosigno]

That's a good new :) Any idea of the release date?

[jeremenichelli]

Not yet, I gave it a try a while ago but the solution was super buggy.

I hope to have the time to try again soon.

[geosigno]

I found a way, I put the code here if it can help you to add this feature if your library ;)

https://codepen.io/anon/pen/pWwgyQ

[jeremenichelli]

Wow! Really cool @geosenna, I'm trying to come up with a way that you can pass coordenates to the observer so it tracks specific areas of the page.

Something like:

const observer = new scrollProgress({
  top: 200,
  bottom: 600,
  onUpdate(x, y) {
    console.log(x, y)
  } 
})

So this way it serves to all purposes, not only reading progress bars. Another option would be to optionally pass a DOM node and track that, update on resize.

Food for thought.