# 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.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

### Growing Spinner

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

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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.

### Related Links

Material Circular Progress Web Component Documentation

Docs for Material's circular progress web component

Related Link arrow_upward
Material Four Color Circular Progress Web Component Documentation

Docs for Material's four color circular progress web component

Related Link arrow_upward
Bootstrap Spinners Documentation

Bootstrap's spinners documentation

Related Link arrow_upward