Loading bar

Loading State illustrations

Spinners

Loading indicators should be displayed in context, centered horizontally and vertically within the container. They should not be placed directly over text or other visual elements without also applying a mask to that content.

Skeleton

Skeleton content is a placeholder that gives a visual hint for the content that the system is in the process of loading. Use skeleton content for full page refreshes, not small async updates, that take a moderate amount of time. If a container is only shown when data is present, do not use skeletons.