Spinners

Spinners

Spinners indicate that an operation is in progress when the final result or completion percentage is not yet known.

Core concept

Explain border and grow spinners, sizes, placement inside buttons, and accessible status text. Show how a spinner can preserve the button\'s footprint during loading.

Using it in a real interface

Use a loading button that disables repeated submissions and a page-level loading indicator. Explain when to show a spinner immediately versus after a short delay for very fast operations.

Implementation notes

Never make a spinner the only explanation of what is happening for a critical operation. Pair it with useful status text where the context is not obvious.