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.

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.

Four Color

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

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.

Growing Spinner

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

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.