A spinner is an animated element that appears after a user's action to indicate that saving or loading is in progress.
- Track: Background that the segment travels on during the looped animation.
- Segment: Animated element of the spinner.
When to use
- Use a spinner to signify that something is loading.
- In some instances, the UI will reflect a change before the change is actually saved and the spinner is used to indicate background activity until information is successfully saved.
When not to use
- Ideally, only one spinner should be used at a time. If a larger section of content is loading, consider using a larger size spinner instead of multiple smaller ones or a skeleton loader instead.
- In combination with a skeleton loader. Choose one or the other, whichever fits the use case best.
- If user action is required before content can be displayed.
- Dark: For neutral backgrounds that are
$gray-200or lighter, or chromatic backgrounds that are
- Light: For neutral or chromatic backgrounds that are
- Small: 16px, used with text labels or inside other UI elements, like a button.
- Medium: 24px, used within larger visual elements, like merge widget status icons.
- Large: 32px, indicates larger components are loading, like a chart.
- Extra large: 64px, indicates a large content area of the UI is loading.
The default visible
Loading... text isn't part of the component itself. However, you may consider replacing that message with something more descriptive when the action is dependent on GitLab. For an in-product example, see the updated 'merge active' status message.
- A 100ms delay occurs before showing a spinner to mitigate unnecessary spinners showing up at the same time when load times are minimal.
- When a change occurs in the UI, like a loading state, it's good to notify a user what is happening. While a spinner visually indicates that a process is happening, it should also be announced by assistive technology through the use of
- See the WAI-ARIA
aria-livedocumentation for more details.
Last updated at: