Usage
A Spinner informs users that content or data is loading. Use Spinners if the process takes less than five seconds to load.
Anatomy
- Loading indicator: The animated element that signals active loading.
- Track: The static area that the loading indicator moves on top of.
- Label (optional): Text to provide clear feedback to users that the system is actively working on their request. Ex: “Loading...” or “Please wait”. The placement and size of this text should adapt to the specific context.
For a more detailed breakdown of spacing and sizing, view the design specs.
Behavior
Inform users
Informing your users that a process is taking place will help prevent them from moving on or assuming there is a bug. Include a label with a Progress bar to add context. Use simple, meaningful text for example “Loading your policies” that inform users.
Best practices
Placement
Center the Spinner on the area that is loading.
Avoid placing the Spinner in random locations.
Alternate considerations
- Consider using a
Progress barif the process takes more than five seconds or the space is large enough for a progress bar.