Enhancing Navigation with CSS Animations for Scroll Progress Indicators

In this article, we’ll use a view() animation, combined with a CSS custom property declared with @property to create a “currently-viewing” and section-based progress indicator for each section of a page. This kind of thing can be useful, for example, for a long documentation page so a user can see where they are in it, and how far through their current section they are. Kind of like a reading-progress bar, but smarter, as it is aware…