A reading progress bar is a colour-changing horizontal line at the top of a story. The bar starts as one colour, then introduces another colour from the left side as a reader scrolls through the story. When the reader reaches the end of the story, the bar has fully changed to the second colour.
Key benefits / use cases
Show reading progress:
Give readers a simple visual cue story length, and their current place in itCustomise the bar colours:
Choose the default colour and the colour the bar changes to as the reader scrolls
In the example below, the progress bar can be seen changing from orange to blue.
How to add a reading progress bar
Open the story in the Shorthand editor.
In the left sidebar, find the header section.
Click the Section options cog beside the header section.
The left-side bar of the Editor will change to show a range of options for customising the story header. A toggle button will enable showing a Reading Progress Bar for the current story:
Scroll down through the options and use the two colour palettes to choose a background colour (the colour of the bar when the story first opens) and the foreground colour (the colour the bar will change to as it is scrolled):
Readers of the story will see the bar change from the background colour to the foreground colour as they scroll.
Best practices
Preview the full scroll experience
Preview the story after adding the reading progress bar. Scroll from the top of the story to the end of the story and check that the bar changes from the background colour to the foreground colour as expected.
Choose colours with enough contrast
Choose a background colour and foreground colour that are easy to tell apart. The colour change is what helps readers understand how far they have moved through the story.
Check the bar against the story design
Make sure the reading progress bar is visible at the top of the story. If the bar is hard to see, choose different colours in Header options under Colour.
FAQs
Where does the reading progress bar appear?
Where does the reading progress bar appear?
The reading progress bar appears horizontally at the top of the story.
What happens when a reader scrolls through the story?
What happens when a reader scrolls through the story?
The reading progress bar changes from the background colour to the foreground colour as the reader scrolls through the story. The bar has fully changed to the foreground colour when the reader reaches the end of the story.
Is the reading progress bar available on every plan?
Is the reading progress bar available on every plan?
The reading progress bar is available on all plans.
It does not appear on published story
It does not appear on published story
If the reading progress bar appears in Preview but not on the live story, the story likely needs to be republished. Republish the story, then refresh the published page and check again.