Components · Feedback

Progress

A determinate completion bar — an 8px track with a brand fill. Use it when the amount of work is known; use Spinner for indeterminate operations.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

progress

trackColor: {colors.surface-muted}
fillColor: {colors.brand}
borderRadius: {rounded.full}
height: 8px

Build with the skill

No package to install — hand this to your AI to generate the progress bar in your stack.

Prompt for your AI

Implement the Zetta "Progress" component in this project's stack using the zetta-design-md skill.

- Apply the `progress` spec from the skill.
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

8px surface-muted track, brand fill, full radius. The fill width animates with --motion-slow.
Use role="progressbar" with aria-valuenow / aria-valuemin / aria-valuemax.

Known gaps

Indeterminate and segmented/striped variants are not yet specified.