Component size, gzipped: 14kb

Spinner

API

Spinners provide a visual cue that an action is processing awaiting a course of change or a result.

Accessibility

  • role="progressbar" is applied to the element.

Examples

Spinner basic usage

Loading

Spinner with Negative Color

Loading

Spinner with different size

Loading

Spinner With Overrides

Loading

API

Spinner props

NameTypeDescription
color
string
Color used for the spinner.
overrides
custom
Lets you customize all aspects of the component.
size
string
Size used for the spinner.
title
string
Title attribute.

Spinner exports

You can import this module like so:

import {Spinner} from 'baseui/spinner'

It exports the following components or utility functions:

Spinner Next

StyledSpinnerNext will replace our current Spinner in v10 of baseui.

What's the difference?

The new spinner uses a single div instead of an svg, which fixes a wobbling issue we found on Safari. The flattened structure also makes the new spinner a bit easier to customize since there are no more overrides to worry about.

You can use the new spinner prior to v10 like so:

import {StyledSpinnerNext} from 'baseui/spinner';

Let's look at a few examples!

Basic

Neat! If that isn't enough, the spinner also comes in three sizes...

Sizes

If you want to customize the default styling of the spinner you can extend it using withStyle.

Customizing

In this example we modify the size of the spinner (via width, height, and borderWidth) as well as the highlight color (via borderTopColor). You could also use withStyle to add margins to the spinner or align it within another element.