Spinner
Spinning SVG loading indicator
import { Spinner } from 'theme-ui'
Props
| Name | Type | Description |
|---|---|---|
title | String | (default 'loading') Text for SVG <title> tag |
size | Number | (default 48) indicator diameter |
strokeWidth | Number | (default 4) stroke width |
duration | Number | (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.
Edit the page on GitHub// example theme variants{styles: {spinner: {color: 'red',},},}// <Spinner variant='styles.spinner' />