Skip to content
Theme UI
GitHub

Spinner

Spinning SVG loading indicator

import { Spinner } from 'theme-ui'

Props

NameTypeDescription
titleString(default 'loading') Text for SVG <title> tag
sizeNumber(default 48) indicator diameter
strokeWidthNumber(default 4) stroke width
durationNumber(default 750) duration of animation in ms

A title attribute should be provided to the component for accessibility purposes. The element uses role='img' by default. Pass any overrides or additional attributes for the SVG element as props.

Variants

Spinner variants can be defined anywhere in the theme object.

// example theme variants
{
  styles: {
    spinner: {
      color: 'red',
    },
  },
}
// <Spinner variant='styles.spinner' />
Edit the page on GitHub