Spinners

Examples

Radial spinners

Regular


Tiny


Small


Large


Gatebase spinner

Guidelines

Use spinners to show users that something is happening based on an action they took. They also offer reassurance that the product is isn't stuck.

When to use spinners?

Spinners specifically help visualise a small (generally less than 10 seconds) yet unspecified wait time. If you do know the wait time and the wait time is likely to be longer than a few seconds, use a progress bar instead.

Spinners are used for circumstances such as:

  • loading additional content (long lists)
  • uploading a document
  • validating/checking for access
  • performing an action
  • submitting a form request

How to use spinners?

Add context to spinners

Whenever you can, include a phrase with the spinner that tells user why they're waiting/what is happening. For example: Uploading image, Checking connection.

Code

Radial

Gatebase