Spinner Loader

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

Spinner Loader

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
A full page loading example.

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

Don't
A full page loading circle on a small container.

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

Do
A circle loading circle used on a modal.

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

Don't
A circle loading circle used on a full page.

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

 

Only use sizes provided

Do
Loading circle on a modal in pre-defined size.

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

Don't
Loading circle resized on a modal.

Do not resize the progress and loading circles arbitrarily.