Use loaders that are proportional to the containers in which they’re located.
Don’t use a combination of large- and medium-sized loaders in a smaller area. This will cause visual tension and confusion with loading hierarchy and user expectations.
Use a loader with description or action button to keep users informed about the background processes.
Don’t use a loader with only an icon for a full page load. This is not legible and does not help the user to know the current state of system.
Use a single loader to help focus a user's attention on a primary area.
Avoid using multiple loaders within a single view. This may cause unnecessary disruption to a user's workflow and give the impression that the experience is slow. If multiple loaders are needed, consider consolidating multiple loaders within a single loader over a larger area.
Correctly size the Progress bar to fit within the width of the container.
Don’t override the default width settings or you’ll risk creating a progress bar that appears broken and out of place.