Progress Bar

A Progress Bar visually communicates the completion status of a task or process. It helps set expectations by showing users how far along they are and how much remains, often used in onboarding flows, file uploads, or multi-step forms.

Props

Style

Visual layout of the progress bar.

Bar
Circle

Label

Boolean to display a text label used to communicate progress.

Segmented

Boolean to a multi-segment version of the progress bar.

Animation

A micro animation can triggered on viewport entry: A subtle animation that plays when a UI element enters the user's visible browser area.

The bar becomes visible, the observer triggers an event
Visually fills the progress bar from 0% to its target value
Animation is complete

Kelsey

Principal Designer