Vibeset

Status mark

Five states (pending, running, done, failed and cancelled) in an SVG that draws its stroke as it moves from one to the next, rather than swapping icons abruptly. What you do not see: the state is never said by the drawing alone, because a green circle with a tick is no use to someone who cannot see colour. Each mark carries its word in a screen-reader-only text ("Done", "Running, 40 %"). Every stroke measures 1, so drawing a ring, a tick or a cross is the same sum. With a percentage the ring fills; without one an arc spins, which is the honest thing when you do not know how much is left.

And the React Bits original: Status Mark

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Status Mark, and this is what we saw in theirs in case you prefer to use the original.

When to use it

In a list of steps or tasks: install, deploy, checks. It replaces a generic spinner and a loose checkmark.

Watch out for

Little to object to: small, SVG, one dependency. Check that the state is also said in words and not only by the stroke.

Accessibility

Four aria signals and reduced motion (six references in the code).