#641
Sizes
Four Progress bars at 60% showing size sm (4px), size md (6px) and the default lg (8px), plus an indeterminate sm bar.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Sizes" pattern (@codeatlasdev/ui demo #641, feedback/progress) in my app.
Call get_demo({ ids: ["#641"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Picking the bar thickness: thin bars for dense cards and headers, the default 8px elsewhere.
Keep these library parts, with the props and tokens the demo uses:
- Progress from "@codeatlasdev/ui"
Behaviour to keep:
- `<Progress value={60} size="sm" label="Small bar" />`
- `<Progress value={60} size="md" label="Medium bar" />`
- `<Progress value={60} label="Default bar" />` keeps the 8px height
- `<Progress indeterminate size="sm" label="Small indeterminate bar" />` honours the height too
- Stacked in a grid with `gap: var(--ca-space-4)`, `max-width: 360px`
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 value={60} size="sm" label="Small bar" />`
- `<Progress value={60} size="md" label="Medium bar" />`
- `<Progress value={60} label="Default bar" />` keeps the 8px height
- `<Progress indeterminate size="sm" label="Small indeterminate bar" />` honours the height too
- Stacked in a grid with `gap: var(--ca-space-4)`, `max-width: 360px`
Related
Loading source.