components
Loader (design)
To convey to a user that a page or a specific part is loading, you can present them with a Loader.
Usage
Use a loader to indicate to users that content is loading and is taking extra time to appear. We recommend showing only one Loader on a page at a time.
Options
Sizes
There are 5 available sizes for a Loader.
- Small: Use inside components like small Buttons.
- Medium (default): Use the default size inside components like default Buttons.
- Large: Use this size for bigger items like the video player or podcast player.
- xLarge: Use this size for bigger items like the video player or podcast player or a smaller section in page.
- xxLarge: Ue this size where the entire page is loading.
Guidelines
Button loading state
If a loader is triggered by a button, place the spinner in the button, and disable the button while the loader is visible.
One Loader at a time
Try to limit the Loaders per page. If the situation occurs where more than one part of content is loading, try to use a xLarge or xxLarge size for the whole section or page.
Position
Try to always place the Loader in the center of the content's container.