Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
English
Description
Provides a concise visual indicator, often bubble-shaped, to communicate the current status of an item or process. It enhances user awareness, particularly within dynamic content flows like infinite scroll or pagination, by highlighting progress or empty states, potentially with animation and fixed positioning. Notable behavior: Animation; Progress State; Empty State.
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.14
TechCrunch
Scrolling throw article
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.