Skip to contentWolf-Rayet

Spinner

A spinner is an animated icon that shows content is loading.

When to use

  • A wait when you do not know how long it will take or what will appear.
  • A short wait in one spot, such as inside a button that was just pressed.
  • A first load, when there is no layout yet to base a skeleton on.

When not to use

  • A load when you know the layout. A skeleton keeps the layout and shows people what is coming.
  • Work where you know how much is done. A progress bar shows how much is left.
  • A wait so long that people might give up. Explain what is happening instead.
  • Several places on the same screen at once. It looks like several separate problems.

Guidance

Do

Size the spinner to fit the space and name the work that is happening.

Don't

Do not put an oversized spinner in a small space, and do not label it Loading. It says nothing about what is loading.

Content

What to write, and what to leave out.

  • Name the work. Loading conversations, not Loading.
  • Use the ing form of the verb, since the work is happening now.
  • Do not promise a duration you cannot keep.