Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
English
Description
A UI element, typically a bar, that visually indicates the user's reading progress or status within a document or page. Often integrated into a fixed navigation bar, it enhances awareness and helps users track their position. Notable behavior: Progress State; Fixed on Scroll.
VotesUp
VotesDown
Pattern ID
158
UX Flows
Awareness
Pathfinding
UI Components
Progress State
Notification Badge
Navbar
Fixed on Scroll
Version
2.1.14
Â
McKinsey Blog
Why is this a good pattern?
â–² Vibrant color allow users to visualize the status bar.
â–² Status bar growing and shrinking with scroll gives a clear map of your reading position.
How could this be improved?
â–¼ When status bar reaches the end there should be a strong action to follow. Such us recommended related article to keep reading, a clear call-to-action to share on social networks or suscribe for more content.