Feedback

Step goal progress bar

A rounded progress bar that tracks completed steps out of a total, showing a fraction label above a smoothly animated fill.

Workspace setup

Set your team roles

3 of 560%

Using Step goal progress bar

A rounded progress bar that tracks completed steps out of a total, showing a fraction label above a smoothly animated fill.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: current, total, color

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1958Fill progress loading textFeedbackA loading label sits as a faint outline of itself while a solid colored copy fills it in from the left like a progress bar shaped like the word, sweeping back and forth while work happens.

1959Fill sweep loading textFeedbackA loading label whose faint outline sits under a fully colored copy that sweeps in from the left, reaches full width, and drains back out, repeating for as long as something loads.

2171Infinite loop path loaderFeedbackA figure eight loader where a bright segment draws endlessly around a faint track, its head and tail moving at different rates so the dash breathes.

1988Labeled progress barFeedbackA labeled progress track whose fill eases to a new width while a percentage readout counts smoothly to match.

1538Progress ringFeedbackA circular gauge that sweeps from zero to its value while the number in the middle counts along, with two threshold marks that light up as the arc passes them.

2032Segmented progress meterFeedbackA progress meter drawn as a row of notches that light up in turn, with a partly filled leading notch and a caption naming the current stage.