Overview
Loading indicators are used to convey to the user that they will need to wait some time for a software- or hardware-related operation to complete. They can be used to convey a range of ongoing processes, including network, disk and CPU operations.
Generally, loading indicators should be used if the wait period is longer than a second.
Using linear loaders
Use linear loaders for the following:
- Loading initial page content
- Representing the progress of a measurable task
✔ Do

Append linear loaders to appbars to load page content
✔ Do

Place linear loaders near information related to the task being measured
✔ Do

Append linear loaders to data tables
Using circular loaders
Use circular loaders for the following:
- Loading learning content renderers
- Indicating the presence of a working background task
- Loading a set of new information
- Pull-to-refresh behaviors on mobile
✔ Do

Place below existing content to indicate where new content appears
✔ Do

Center circular loaders when loading new information