Progress indicators are used to show a state of loading.
Progress indicator
Default
Use this progress indicator to show a process is running.
Sizes
The indicator comes in various sizes (Xs, Sm, Md, Lg and Xl) suitable for buttons, fields, or full-page loading.
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 |