#094
Indeterminate
Two indeterminate progress bars labelled Loading and Syncing for work of unknown length.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Indeterminate" pattern (@codeatlasdev/ui demo #094, feedback/progress) in my app.
Call get_demo({ ids: ["#094"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Background loading or syncing where no percentage is available.
Keep these library parts, with the props and tokens the demo uses:
- Progress from "@codeatlasdev/ui"
Behaviour to keep:
- `<Progress indeterminate label="Loading content" />`
- `<Progress indeterminate label="Syncing data" />`
- Each bar sits in a row next to a text label, Loading and Syncing
- Column has `max-width: 480px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Progress
@codeatlasdev/ui
How it is built
- `<Progress indeterminate label="Loading content" />`
- `<Progress indeterminate label="Syncing data" />`
- Each bar sits in a row next to a text label, Loading and Syncing
- Column has `max-width: 480px`
Related
Loading source.