Edit this page
[?] Component size, gzipped: 24kb

Spinner

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

Overrides

Additionally, you can fully customize any part of the Spinner through the overrides prop. The Spinner consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Loading

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Spinner API

size union = 44

Size of element, will be passed to the svg width/height style. Can also be a value included in

One of
number,
string

color string = ""

Color of icon, will be used as svg fill

title string = "Loading"

Allows you to set the SVG <title> label, which is used for accessibility

overrides object = {}

Svg { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ActivePath { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
TrackPath { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Spinner exports

You can import this module like so:

import {Spinner} from 'baseui/spinner'

It exports the following components or utility functions:

  • Spinner
  • StyledSvg
  • StyledTrackPath
  • StyledActivePath