Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
English
Description
This pattern provides a fixed, animated bubble that indicates reading progress, helping users understand their position within long articles and enhancing content appreciation.
VotesUp
VotesDown
Pattern ID
91
UX Flows
Pathfinding
Awareness
Appreciation
UI Components
Infinite Scroll
Pagination
Animation
Fixed on Scroll
Progress State
Empty State
Version
2.1.19
TechCrunch
Scrolling throw article
Loading capture…
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.
✴️ Same element allows to cancel/close the article when user is done reading.
✴️ Once it reaches the end, it shows a check mark to indicate success.