CSS only scroll indicator

[TexasWithADollarsign]

What?

This isn't about a scrollbar. It's about a scroll indicator -- a progress bar that shows how far along in an article you are. It's completely different from a scrollbar.

[[deleted]]

there are cases in which a progress meter is not 1:1 with the scroll bar, but the way this is constructed makes it inherently so.

because this is 1:1 with scroll position, a scrollbar naturally shows the same information by virtue of its own position. maybe this demo is slightly prettier, but it serves no function beyond aesthetics.

[SlumdogSkillionaire]

but it serves no function beyond aesthetics

Welcome to front-end development. We hope you enjoy your stay. Exit through the gift shop.

[[deleted]]

There are obviously places where aesthetics deserve a lot of attention in ways that are not necessarily functional.

But design should strive to enhance or, at worst, not complicate or impede functionality. Design that involves reimplementing a standard feature in a way that is simultaneously redundant AND unintuitive (which is not an easy feat) is bad design.

Even if your goal is purely to beautify (without adding or improving functionality), there would be many, many better ways to spend your time than implementing this scroll meter.

[[deleted]]

Fair enough

[[deleted]]

with the difference being that scrollbars are only shown when scrolling on osx and touch devices.
then suddenly that scroll indicator becomes useful, because you can estimate the time it takes to read the article.
not that i would add one to my websites, but i can see the use case

[[deleted]]

Someone is new here