Loaders indicate to the user that data is loading.
Loaders should be shown when content is loading or an action is being processed. They reassure the user that their request is being fulfilled. Once the process is complete the loader should fade and be replaced by the loaded content.
Use loaders when the the wait time is unknown or anticipated to be longer than one seconds. When showing the loader as part of a state (writing or validating data), no delay should be used.
Do
Do not use loaders if the loading process is less than one second.
To further reduce a user’s uncertainty, offer the reason they are waiting by customising the label. For example, “Your payment is being processed” or “Loading results”.
Loaders are available in different sizes to cater for different use cases. For example:
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.