Reading Progress Bar

This element allows you to quickly add a progress bar that tracks the scrolling of any element individually (like an article) or the entire page. It can be set to measure the scrolling distance relative to the top, middle or bottom of the viewport and can be positioned anywhere on the page.

Progress Bar position – Choosing top or bottom will automatically fix the progress to the top or bottom of the viewport with fixed positioning. Choose custom to manually position anywhere you like using the style tab, as you would with any other element. The width of the bar is always a percentage of the element, no matter the width.

Container selector – ie the container of the content you’re wishing to measure the scroll progression of. 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.

For the default ‘body’ it’s best to leave it as ‘top of viewport’ for the start and ‘bottom of the viewport’ at the bottom. This way the progress bar will match perfectly with the entire scrolling of the page.

If using a container inside of a page, for eg which contains post content, it can sometimes be more appropriate to start and end based on the middle of the viewport, so it better matches the eye level where the user would be reading.

Styling

Change the colours, the height, borders etc of the progress bar to better match your site.