Spinner Guidelines

Use spinner to inform marketers that the system is retrieving or synchronizing data, that might take undetermined but short time before finishes.

Best practices

Spinners should:

• Be positioned to indicate where the result of the progress will be placed. Think about it as a placeholder.
• Have a steady animation so the user knows that something is happening.
• Be paired with a label next to the indicator that gives extra context.
• Give a feeling of continuity when multiple data is being processed in a row. To achieve this, provide a spinner one by one sequentially for each piece of data.
• Be used when the operation falls around these keywords:
• Fetching...
• Uploading...
• Signing in...
• Connecting...

Try to avoid:

• Using spinner to indicate a progress which takes a determined length of time to be completed. Use a Progress Bar instead.
• Unnecessarily restrain marketers while a long computation is taking place. Let them finish other tasks without interrupting the loading. When the process is finished, send them a notification with a link to the affected area.
• Visually overwhelm the screen by putting multiple spinners in the same content box. As a rule of thumb don’t let the user see more than four spinners on the screen at the same time.
• Spinners when the operation falls around these keywords:
• Loading...
• Retrieving...
• Installing...

Content guidelines

Spinner labels should:

• Start with a capital letter.
• Give extra context if it helps the user understand the situation better.
• Be short and to the point.
• Use present continuous form.