Progress indicators are used to show a state of loading.
Progress indicator
Sizes
Use this Large size Progress indicator for page loads, this size can also include an icon and/or a label. See Loading guide for page load patterns.
The smaller sizes are suitable for use in components ie buttons or fields. See Loading guide for component patterns.
Dark backgrounds
The indicator can appear white for use on dark backgrounds.
User experience
Use this component within loading patterns. Predominantly the user experience direction is dictated by the pattern that contains it.
Visual design
Simplicity is the key design requirement for this component. It has an intentional minimal form and simple animation, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the file size.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
| Platform | Status | Other name |
|---|---|---|
| GEL Design System | Available | |
| Mesh UI | Available | Loader |
| Legacy WDP | Older version available | Loader |