fetaUI
GitHub

Progress

Shows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/progress
Playground
Empty
Partial
Complete
Indeterminate
Paused
Error
Sizes
Moves forward
Uploading30%
Your progress
30%
Label
Preparing your workspace68%
Processing securely
Value tip
Your progress
50%
Segments
  1. Checkout
  2. Shipping
  3. Payment
  4. Confirm
Steps
  1. Customer
  2. Shipping
  3. Payment
  4. Confirm
ETA
Updating50%
30 sec left
Upload
Uploading77%
Download
Download in progress
42% complete
Ticks
Progress indicatorOn track to finish three days early
66%↗ 30%vs the last period
Flight
DEPARTURE 11:12 AMARRIVAL 4:34 PM
YYZTorontoLAXLos Angeles
On time
AC5182 hr 41 min left
State
Size
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/progress

Sizes

4, 8 or 12 px. Small fits rows and toasts.

State
Motion

Accessibility

  • The progressbar role with value, min and max, and no value when indeterminate.
  • Label it with what is progressing.
  • Complete and Error change more than colour in the text you pair them with.

Motion

  • The fill eases to each new value in 300 ms and only moves forward. A restart jumps back.
  • Numbers count with it, in mono so the width holds.
  • Complete turns success with a small pulse. Error shakes 2 px once.
  • The comet sweeps in 1.4 s and pauses offscreen.
  • With reduced motion, the fill steps, numbers swap and the comet is a static segment that fades.

Responsive behavior

  • 4, 8 and 12 px at every width. Recipes fill their column, up to 380 px.

Performance

  • The fill is a CSS transform, so it moves on the compositor. Indeterminate pauses off screen.
  • ProgressValue writes the count straight to the node, so counting up does not re-render React.
  • ProgressTicks renders one span per tick, 66 by default. Lower ticks in long lists.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Progress plus the recipes: ProgressLabel, ProgressTip, ProgressSegments, ProgressSteps, ProgressEta, ProgressUpload, ProgressDownload, ProgressTicks, ProgressFlight.
  • Progress needs label. Leave out value for indeterminate. state is worked out from value unless set.
  • The fill eases forward only. A lower value jumps back.
  • Values in the demo are fixed or stepped by a button. Wire them to real work.
/docs/components/progress/markdown
PreviousToast
NextEmpty

Related

SpinnerComponentSays something is happening when the wait is short or unknown. Four kinds at five sizes.SkeletonComponentA placeholder in the shape of content on its way, so nothing jumps when it arrives.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.Order TrackingComponentStage and ETA, a five stage track, a timeline of updates, the items and the address.Usage MeterComponentA metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.