Loader

Loaders are used to visually communicate processing.

Overview

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.

Sample

Best practices

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

Accessibility

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

Properties

Styles

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