Components · Learning
ProgressBar
Progress through a lesson. It celebrates once, when it fills.
Try itChange the motion setting at the top to feel each personality.
Use it
<ProgressBar value={3} max={5} label="Lesson progress" />How it moves
| When | Role | What moves |
|---|---|---|
| The value changes | state-change | The fill grows or shrinks to the new value |
| The bar becomes full | state-change, then celebration | The fill changes to the accent color, and the bar pops from the celebration scale back to 1 |
| The bar is reset | state-change | The fill shrinks back. Nothing celebrates |
Rules:
- The bar celebrates once, at the moment it fills. It does not celebrate each step.
- A spring may carry the fill slightly past its value. The track clips it, so the fill never leaves the bar.
- The bar never loops or pulses to ask for attention.
Reduced motion: the celebration scale is 1, so the bar does not pop. The fill still changes size and color, over the shortest duration.
CSS variables used: --ss-motion-state-change-spring, --ss-motion-state-change-spring-duration, --ss-motion-state-change-duration, --ss-motion-state-change-easing, --ss-motion-celebration-scale, --ss-motion-celebration-spring, --ss-motion-celebration-spring-duration.