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.