Progress
Progress through a task: ink filling a groove, never a coloured bar.
Kit parts
Onboarding
Setting something up: stations along a groove (done ones with their lamp lit, the current one a raised cap) and a checklist of check keys with a progress slot.
Seats open in 11 days. Want one email that morning?
Anatomy
The track is a grid of equal columns, so the stations space themselves. The done lamp and the raised cap are the kit’s lamp and key, drawn on the station. The checklist is the kit’s check keys and progress slot.
Variants
- Three steps
- Five steps · all done
- Narrow · only the current name
- Checklist · all done
States
- Start
- Under way
- All done
Props and options
| Name | Kind | Description |
|---|---|---|
| data-onboarding-go · aria-controls | attribute | On any key: steps the track it names. |
| setOnboardingStep(ol, n) · updateOnboarding(section) | function | Move the track to step n (steps + 1 = all done); recount a checklist. |
| Space · Tab | keyboard | Tick a task with Space; the track is read, not operated: its keys step it. |
Usage notes
Step the track with Back and Next: ink runs along the groove and the lamps light behind you. Tick tasks off: the count, the slot and the next key follow.
Accessibility
- Done is a lit lamp and the word.
- Tasks are real checkboxes with labels.
- Only the next task shows its key, so there is one contrast key on the surface and one obvious thing to do.
- Reduced motion stops the ink running along the groove; the track shows the same.
- Keyboard: the Next and Back keys and the task checks are native controls in the tab order. Enter or Space presses a key and Space ticks a check; the script adds no keys of its own.
