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.
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.
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.
This allows you to choose when the start / stop positions are relative to the viewport.
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.