Guidelines
Guidelines
Usage
A Spinner should:
- Be used to present process, not progress. Not to be used for entire page loads.
- Be used when the expected processing can take longer than a second.
- Be placed on surfaces that provide enough contrast between it and the Spinner.
- Appear in a container that has a background if placed on text.
- Be used inside a Button when the Button triggers a Spinner.
- Always be spinning in its implementation to code.
Appearance
A Spinner should:
- Be presented as the contrasting appearance to its background. 'dark' on light surfaces and 'light' on dark surfaces.
Sizing
A Spinner should:
- Always have padding around the Spinner. It should never be too close to the edges of its parent components or container's borders.
- Be resized by scaling up the entire component. It is not recommended to make it larger than 132x132 pixels as it can easily become too large compared to the rest of the content.
Accessibility
A Spinner should:
- Include a clear alt-tag for improved accessibility.
- Have the alt-tag be as clear and concise as possible. For example, "Loading", "Submitting", and "Processing".