Loading Placeholder

Progress and loading indicators express an unspecified wait time or display the length of a process.

Loading Placeholder

Component checklist

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

Usage Guidelines


Use proper loading circles

Do

Use the full page loading circle specifically for full page loading.

Don't

Do not use the full page loading circle within individually loaded content containers and/or as a progress circle.

Do

Use the circle loading circle in modals, text fields, widgets, etc.

Don't

Do not use the circle loading circle for full page loading.

 

Only use sizes provided

Do

Progress and loading circles come in pre-defined sizes. Only use these sizes in designs.

Don't

Do not resize the progress and loading circles arbitrarily.