Using CSS to Add A Reading Progress Bar To My Site

7 months ago by codeinabox to c/css

Short post describing how to use CSS's animation-timeline to add a reading progress indicator to webpages so that users can see how far through the page they've scrolled

beelzebum 4 points 7 months ago

so you’re invented a scroll bar? Or did you break the scroll bar with some other CSS trick?

save

path: 0 22936554, hotness: undefined, score: 4, children: 1

orca 3 points 7 months ago

The trick is that it’s purely CSS using animation-timeline: scroll(y). Previous approaches for this had to lean on JS.

save

path: 0 22936554 22941912, hotness: undefined, score: 3, children: 0

Itwasntme223 3 points 7 months ago

Interesting experiment. Didn't know CSS could do that.

save

path: 0 22936621, hotness: undefined, score: 3, children: 0

CandleTiger 3 points 7 months ago

What is actually the attraction of reading progress indicators on webpages?

I get that it's fun to do active things with CSS instead of javascript, sure.

But aside from goofing off and/or tech demos -- is there a target audience who is excited and happy to have a progress bar on their pages and misses it when absent? I've been seeing this feature frequently and for me it's kind of annoying.

save

path: 0 22942196, hotness: undefined, score: 3, children: 0

css

@programming.dev

go to feed...

css

@programming.dev

go to feed...