Loading resource
Feedback
Measured progress with a smoothly filled bar and synchronized value.
Progress animates measured values on first view and smoothly retargets updates in either direction. ProgressValue shares the bar's animated value; use display="fraction" for completed/total labels. Base UI exposes the real target to assistive technology immediately. Use ContentSkeleton for unresolved content and PendingButton for actions of unknown duration. Timing stays in src/lib/motion.ts.
src/components/ui/progress.tsx
40% complete.
The fill and its value move together, including when progress decreases. Updates start from the visible position, so rapid changes do not jump back to zero. These controls simulate measured progress only in this preview.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.