Loaders are used to visually communicate processing.


Loaders show that something is loading, computing, or processing with a spinning visual.

Loader type's can be set as "determinate" or "indeterminate". As a good UX practice, "determinate" should be used whenever it is possible to relay the loading percentage.


Best practices

Try not to overuse Loaders. Some interface elements can benefit from skeleton states, or by utilizing the Progress component.


Loader must have an accompanying label property to provide context to assistive technologies. Add a concise description so users are able to interpret why the Loader is present.

API reference



Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.