Sizes
| Class | Example |
|---|---|
| .mdst-spinner--sm | |
| .mdst-spinner | |
| .mdst-spinner--lg |
Color
| Context | Example |
|---|---|
Inherits currentColor |
|
| Error parent |
Something went wrong
|
| Success parent |
Saving changes…
|
| Muted parent |
Loading…
|
Examples
Accessibility
Always add role="status" and aria-label="Loading" to spinner
elements so screen readers can announce the loading state. Adjust the aria-label value to describe
the specific action, e.g. "Submitting form" or "Loading content".
Usage
<!-- Default spinner -->
<span class="mdst-spinner" role="status" aria-label="Loading"></span>
<!-- Sizes -->
<span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Loading"></span>
<span class="mdst-spinner mdst-spinner--lg" role="status" aria-label="Loading"></span>
<!-- Inherits currentColor from parent -->
<div style="color: var(--mdst-color-error)">
<span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Error"></span>
Something went wrong
</div>
<!-- Inside a button -->
<button class="mdst-button" disabled>
<span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Submitting"></span>
Submitting
</button>