Spinner

When to use it

The Spinner component is used to indicate loading or processing states. It provides a visual cue to users that an action is being performed and they need to wait for it to complete. Often used within a Button in contexts where a delay in response is expected.

TIP

Also see Loading, which is a utility that can be used on components when loading data in a more temporary way.

Variants

• Default: The default spinner size.
• Small: Use the .c-spinner--small modifier for a smaller spinner.

What it looks like

Code examples

Normal

<div class="c-spinner"><span></span><span></span><span></span><span></span></div>

Small

<div class="c-spinner c-spinner--small"><span></span><span></span><span></span><span></span></div>

Accessibility notes

For users who have enabled the "prefers-reduced-motion" setting, a ⏳ emoji (with the alternative text "Loading…") is shown instead of the spinner.