Skip to contentSkip to navigation
DocsDocs

Spinner

Work of unknown length in a small area, such as a panel that is updating, as a turning arc.

StableSince 1.0.0
On this page

Overview

Show code, LoadingPreview.tsx

Variants

Small

Inside controls, and beside a line of text or a heading.

Medium

A panel or a card that is updating. The default.

Large

The middle of a region whose content is on its way.

Show code, Sizes.tsx

Anatomy

Held still at one moment of its turn.

  1. Spinner

  2. Arc

Show code, SpinnerAnatomy.tsx

Behaviour

Reduced motion

With reduced motion, the arc keeps turning, more slowly.

Rules

When the work ends, the result or the error takes the spinner's place.

Use it when

  • Work of unknown length in a small area, such as a list updating after a filter changes
  • An update beside content that stays in place meanwhile
  • Content of unknown shape while it loads, such as search results, with its label beside it

Related

  • The work that follows a press, such as saving, shown on the button that started it.

  • A task whose completion can be measured, such as an upload.

  • Loading a page or a route of an application, along the top bar.

  • Content of a known shape loading in its place, such as a card or a list, as a skeleton.