Loader

Indicates a processing state

Demo

See more examples

API

Tag

Name Type Content
m-loader Custom tag Text (optional)

Attributes

Name Value Description
loading Boolean attribute When present the loader will rotate infinitely. Without it Loader remains still.

Guidelines

Loader text

In most cases the loader should have its own text or be in close proximity to a related message, like a button label. In some cases it's appropriate to have a loader on it's own without a message (in those cases see Accessibility).

Loader size

The default size works for most use cases, but you can enlarge or shrink Loader with the text size utility classes or set its own font size:

Nesting Loader

Loader will inherit font properties, so when it's nested in elements like button, anchor, or headings it looks as you would expect it to:

Accessibility

If a Loader doesn't have text it should use aria-labelledby or aria-label.