Feedback

Fill progress loading text

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

LoadingSyncing

Using Fill progress loading text

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

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: text, accent, cycleSeconds, baseOpacity

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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2117Breathing dot loaderFeedbackDots that stay put and breathe instead of moving, swelling and dimming in turn so the row reads as a slow heartbeat.

2151Expanding ring loaderFeedbackThin rings that grow out of a single point and fade as they widen, released one after another so the pulse never stops.

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.

2167Hopping dot loaderFeedbackA short row of dots that hop in a travelling wave, each one leaving the floor a beat after the dot beside it.

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

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.