The progress bar is positioned at the top of the page and stays visible when scrolling. It indicates how far a user has scrolled and how much more scrollable content there is. It is used to enhance the user experience on long pages with a lot of text content, such as blog detail pages.
Important: the value of the progress bar is based on the height of the element
with the class
The progress bar is hidden by default. The
is-activeclass is added via JS if the page content
.js-reading-progress-bar__contentis long enough to be scrollable.