Figma loading indicator components

A spinner is what you show when you cannot answer the only question the user has, which is how long. A submit button waiting on a server, a table refreshing after a filter change, a dashboard fetching its first payload, a search field thinking.

The component takes ten seconds to place and considerably longer to place well.

Three styles, four sizes, one decision

The set is a single component with two properties. Style gives you line simple, line spinner, and dot circle. Size runs sm, md, lg, and xl.

That is a deliberately small surface and it should stay small in your product too: one spinner style used everywhere is a quiet signal that the system holds together, while three different spinners across three screens is how people work out that three teams built them.

Size is mostly a question of what the spinner is standing in for. The xl belongs in an empty panel or a full page. The sm belongs inside a button or a table row, where the text around it already sets the scale.

When a spinner is the honest answer

Jakob Nielsen's three response time limits still set the rules here: a tenth of a second feels instant, one second is where a train of thought starts to break, and ten seconds is where people give up on the task and go elsewhere. Below a second, a spinner is noise, so a short delay before showing one beats showing it immediately and flashing it for 200ms.

Past ten seconds a spinner has stopped informing anyone and started apologizing, which is where a progress indicator with a real number belongs, or at minimum a line of copy naming the operation.

Skeletons for layout, spinners for actions

A spinner floating over an entire page says only that something is happening. A skeleton, the gray placeholder shapes arranged in the layout the content will fill, says what is coming and where.

Nielsen Norman Group's comparison of skeletons, bars, and spinners lands where most teams eventually do: skeletons for page and list loads, spinners for something the user just triggered, bars when there is a real number to show, and a progress circle when that number has to live in a tile.

And if the table has no rows rather than late rows, that is an empty state, not a loading state. The two get confused constantly, usually by shipping a spinner that never resolves.

Looping it in Figma, and the accessibility wrinkle

In a prototype, a spinner loops with two variants, a rotation difference between them, and an "after delay" interaction using smart animate. It is not a real animation, but it survives a demo.

In production, keep the rotation linear and the cycle around one second, because a spinner that eases in and out looks like it is struggling.

There is a standards wrinkle worth knowing: WCAG's pause, stop, hide criterion asks for a control over moving content that runs longer than five seconds, exempting movement that is essential. A loading spinner usually counts as essential. A spinner still turning after thirty seconds with no message beside it is a failure of a different sort, and no ARIA attribute fixes it.

When it's time to build, the same indicators exist in code. Untitled UI React loading indicators are open source, built with Tailwind CSS and React Aria, with the animation and the labelling that screen readers need already in place.