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, it's good to audibly notify assistive technology that a process is happening through the use of
role="status", see the WAI-ARIA
- Since the spinner contains no text content,
aria-labelis used to provide a short message, for example,
- The spinner animation is currently not changed by
perfers-reduced-motionbecause it can be considered essential to understanding the state of the application. See Note 4 in Understanding WCAG SC 2.2.2 Pause, Stop, Hide.
- See the WAI-ARIA
statusdocumentation for more details.
Last updated at: