A reading progress bar is a horizontal bar that appears at the top of a Shorthand story. The bar changes from one colour to another as a reader scrolls through the story. When the reader reaches the end of the story, the bar has fully changed to the final colour.
Key benefits / use cases
Show reading progress: Give readers a simple visual cue as they move through a story
Customise 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 at the top of the story.
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 the Reading Progress Bar for the current story:
Scrolling down through the options, two colour palettes enable choosing the background colour (the default colour) and the foreground colour (the colour the bar will change to):
Readers of the story will see the bar change from one colour to the other 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.