Loader
Loaders are visual animated indicator that let users
know the loading state of components, sections or pages.
Use Cases
- Whenever a component, section, or page experiments a delay on loading time that may be noticeable by the user.
Loading...
HTML
Do's & Dont's
Use it where is needed
Loaders can work at different levels. They can relate to the full
website loading process, to a specific container, or to a particular
component.
Be mindful of each case before including them on a layout and also work together with Developer teams in order to know when they will be relevant according to APIs and server calls.
Be mindful of each case before including them on a layout and also work together with Developer teams in order to know when they will be relevant according to APIs and server calls.
Select a version according to waiting
time and spacing
As shown above, there are different versions available. Use the
percentage-based one if we are able to provide a realistic time
estimation to the final user. If that is not the case, use any of
the infinite spinner versions provided.
As general criteria, use the most stand-out versions for full-screen or container based loaders. Use the Inline version for smaller containers or minor process-based loading feedback. This may also change by business needs or technical constrains.
As general criteria, use the most stand-out versions for full-screen or container based loaders. Use the Inline version for smaller containers or minor process-based loading feedback. This may also change by business needs or technical constrains.
Do not use the Loader without
supportive text
Providing a Loader without a supportive text is not advised. As
giving visual feedback to users is the main goal of this component,
not providing context will make information unclear from their
standpoint.
Best practices for Supportive texts include: using a friendly non-technical language and keeping the message short and clear.
Best practices for Supportive texts include: using a friendly non-technical language and keeping the message short and clear.
Alternative and Related components
