Read Progress Indicator

Two fragments to indicate read progress

One shows a linear bar overlay over the content, the other one includes a Table of Content, generated dynamically from anchored H1, H2 and H3 found within a text, highlights the current headline and allows navigation by clicking the headline.

Table of Content

• TOC picks up any H1-H3 header that has an id, contained in the drop zone of this fragment. IDs serve as navigation target.

• "Table of Content" Headline as well as "no content found" message can be configured in the page editor

• Navigate by clicking the TOC, or see an indicator in front of the current TOC heading about the currently displayed chapter, updating on scroll.

• Due to HTML limitations: Does not work within an overlay:hidden element, e.g. a Grid.

Standalone Progress Bar

• Add the reading-progress fragment to a page. In the page editor, you'll see the (empty) progress bar and a drop zone

• The progress bar initially contains a notice to the page author: Due to the way HTML works, it can't work within any element that uses "overflow:hidden" - e.g. within a Grid. This message is only shown on the page editor, never to the actual user.

• You can change the author's notice, e.g. map it to "reading time" of a blog article - as soon as it's changed, it will show on an actual page.

• Any content that you add to the drop zone is being monitored by the progress indicator, which will grow until the scroll position includes the bottom of the content.

• The progress indicator will be sticky instead of scrolling out on the top of the page, but at the end of the article, it will scroll out.

• You can configure (1) if it shows initially. Use this depending on the length of your typical content and screen size: Javascript will make it appear/disappear when it's (un)necessary, but it'll flicker in either direction - choose your poison.

• You can configure (2) the color of the indicator - e.g. pick from your stylebook