Fieldbook
Sign in

Feedback

Progress ring

A 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.

Using Progress ring

A 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.

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: value, size, stroke, 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

Fill progress loading text
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.
Fill sweep loading text
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.
Infinite loop path loader
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.
Labeled progress bar
1988Labeled progress barFeedbackA labeled progress track whose fill eases to a new width while a percentage readout counts smoothly to match.
Quiet Ring Spinner
2020Quiet Ring SpinnerFeedbackA minimal single-element loading ring: a thin circle with one colored quarter that spins continuously to mark a busy state.
Segmented progress meter
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.