Status
Progress Indicators
This is the same component as Stories Progress, viewed under a different HIG category name — see that page for the full, real treatment.
Findings
What's actually in /ig
- Story progress uses a transform: scaleX width-fill transition with linear timing, set per-instance to match the story's display duration — fully documented on Stories Progress.
Usage
When to use it
Use when
Indicating time-bounded progress across a sequence of content pieces (stories, slides).
Avoid when
Showing a generic loading spinner or an indeterminate fetch state — use a different indicator for those.
Anatomy
Anatomy
- 01
Segmented track
- 02
Fill (transform: scaleX, linear timing)
- 03
Per-segment duration
Specification
Spacing, colour, type, and motion
- Fill animation
- transform: scaleX(0→1) with linear timing — duration set per-instance to the story's display length
- Track
- See Stories Progress for the full confirmed spec
States
States
| State | Behaviour |
|---|---|
| Pending | Segment fill is at scaleX(0) — not yet played. |
| Playing | Segment fill animates from scaleX(0) to scaleX(1) over the story's duration. |
| Completed | Segment fill is at scaleX(1) — fully filled. |
Examples
Real interface compositions
Stories
Story segment timer
Each story in a sequence owns one pill segment; the active segment fills left-to-right over the story's real display duration while completed segments remain full.
transform scaleX fill, linear timing, per-story animation-duration, pill segments
Guidance
Usage guidance
- Don't duplicate content here — Stories Progress is the canonical page for this component.
Do / Don't
Do / Don't
Do
- Go to the Stories Progress page for the complete, evidence-backed implementation — all spec, tokens, and usage live there.
Don’t
- Duplicate the spec here; this page is a cross-reference only.
See also