Progress bar

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 .js-reading-progress-bar__content.

Default

px 

			
				<progress class="o-progress-bar js-reading-progress-bar " aria-hidden="true" max="100" value="0" id="o-progress-bar" aria-label="Reading progress">
</progress>

Documentation

States

  • is-active

    The progress bar is hidden by default. The is-active class is added via JS if the page content .js-reading-progress-bar__content is long enough to be scrollable.