Page level
At a page level, loaders work by understanding the time to load a page, whether it is indeterminate or determinate. This helps users know that their query is under process, keeps them informed and engaged during an interface waiting period, and indicates a backend computing process in progress.
New page: Use a loader with description and/or an action button.
Current page: Use a loader with description.
Loader in page section: Use a size proportional to the size of the container.
Contextual side panel
In a contextual side panel, loaders enable the users to know that their query is under process and keep them informed and engaged during interface waiting periods.
Loading results in contextual side panel: Choose the appropriate loader size based on the size of container.
Card
Loaders used on a card indicate the data, value to be loaded, or a process being completed in background.
Loader on card: Avoid using a label or description or action button. The loader should be proportional to the component used, too many elements will create visual clutter for the users.
Loader on card with a sidebar: Used to show a process in progress or data to be loaded on a card.
Loader on modal: The modal should not resize or flicker with the content being loaded.
Progress bar on modal: The modal should not resize or flicker with the content being loaded.