- Do use a Loading spinner when confirming a change has been made or a task is being processed.
- Do use a loading spinner to let people know they have to wait for something to happen.
- Do use a loading spinner when the expected waiting time is more than 3 seconds.
- Don't use the loading spinner on it's own if the waiting time is likely longer than 8 seconds. With a longer wait time, pair the spinner with a self updating message to reassure the user that the process is still working. eg. 'Loading your details', 'Still updating'.
- Don't use a loading spinner to show that content is going to be loaded into empty slots within a preloaded page. Use the skeleton loading component instead.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3+ |
|
App (@ovotech/element-native) |
v3+ |
How to use it
Colour variants
Use the base colour variant when the loading spinner appears on top of a light coloured background. Use the inverted colour variant (white) when the loading spinner appears on top of a dark coloured background.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
inverted |
boolean |
false |
|
size |
small | large | number |
small |
|
accessibilityLabel |
string |
Loading |
Related foundations
Related components
Related patterns
External links
- xxx