Reading progress bar

A thin coloured bar sticks to the top of the screen while reading and fills up as the page scrolls, from the heading to the last line of the article: readers see at a glance how much is left. Ideal for a blog, a guide, a case study or an advice page. Progress follows scrolling through CSS view-driven animations (animation-timeline); a short script takes over in browsers that do not support them yet (Firefox). The decoration is hidden from screen readers. AA contrast in light and dark mode. With prefers-reduced-motion the bar is removed.