Reading Progress Bar

This component allows you to quickly add a progress bar that tracks the scrolling of any element individually (like an article) or the entire page.

This component can be generally be placed anywhere in the template, although to make sure it always functions predictably it would be best to add it either before or after all the content if using fixed positioning.

Option Controls

Progress Bar position

Choosing top or bottom of viewport will apply the fixed positioning styling you need to. Or choose manual to position anywhere you like.

Article Selector

The default is body, so the reading bar will be moving based on the height of the entire page. Any selector can be chosen to be the element that the scroll position is based on.

Viewport Settings

This allows you to choose when the start / stop positions are relative to the viewport.

Pro Tips

The component is ideal for single post templates where the user may need some visual indication of how long the specific article is. Especially if there is a lot of content below the post, meaning the scroll bar is not a good indication of article length.