Spinners

Spinner indicators express an unspecified wait time or display the length of a process.

Material Web Component

The circular progress web component from the Material Web Components library is one option for spinner elements within this theme.

Default

By default, the circule progress Material Web Component uses the progress="{number}" attribute to set the positioning of progress state where number is any number between 0 and 1.

<mwc-circular-progress progress="0.7"></mwc-circular-progress>

mwc-circular-progress(progress='0.7')

Indeterminate

The indeterminate attribute can be added to the circular progress web component in place of the progress attribute to add the animated spin to the element.

<mwc-circular-progress indeterminate></mwc-circular-progress>

mwc-circular-progress(indeterminate)

Four Color

A separate web component, the four color variation, can be used as well. This is best used with the indeterminate attribute.

<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>

mwc-circular-progress-four-color(indeterminate)

Bootstrap Spinner

The Bootstrap spinner component is also available, and has been modifed to match the Material Design specifications as closely as possible.

Default Spinner

By default, the spinner has a dark color, but the color can be set using any text utility that sets color.

<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

.spinner-border(role='status')
    span.visually-hidden Loading...
.spinner-border.text-primary(role='status')
    span.visually-hidden Loading...
.spinner-border.text-secondary(role='status')
    span.visually-hidden Loading...
.spinner-border.text-success(role='status')
    span.visually-hidden Loading...
.spinner-border.text-info(role='status')
    span.visually-hidden Loading...
.spinner-border.text-warning(role='status')
    span.visually-hidden Loading...
.spinner-border.text-danger(role='status')
    span.visually-hidden Loading...
.spinner-border.text-light(role='status')
    span.visually-hidden Loading...
.spinner-border.text-dark(role='status')
    span.visually-hidden Loading...

Growing Spinner

The .spinner-grow variant is another option for a different spinner style.

<div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

.spinner-grow(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-primary(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-secondary(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-success(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-info(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-warning(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-danger(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-light(role='status')
    span.visually-hidden Loading...
.spinner-grow.text-dark(role='status')
    span.visually-hidden Loading...

Button Spinner

Either spinner type can be used within the button element. The .spinner-border-sm or .spinner-grow-sm size options are also used within the button examples.

<button class="btn btn-primary" type="button" disabled">
    <span class="spinner-border spinner-border-sm me-3" role="status" aria-hidden="true"></span> Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm me-3" role="status" aria-hidden="true"></span> Loading...
</button>

button.btn.btn-primary(type='button', disabled)
    span.spinner-border.spinner-border-sm.me-3(role='status', aria-hidden='true')
    | Loading...
button.btn.btn-primary(type='button', disabled)
    span.spinner-grow.spinner-grow-sm.me-3(role='status', aria-hidden='true')
    | Loading...

Material Web Component

Default

Indeterminate

Four Color

Bootstrap Spinner

Default Spinner

Growing Spinner

Button Spinner

Related Links

Change the theme type!

Try a pre-built swatch!

Or choose your own colors...

Need ideas? Randomize!

Finished? Export your color palette file with install instructions!