Documentation Playground
Skip to content
Docs

Spinner

Displays an animated loading indicator. 
<.spinner />

API Reference

This component is based on the span element and supports common margin props.

Prop Type Default Description
class string nil Additional CSS classes
loading boolean true Whether spinner is loading
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
size string "2" Spinner size
style string nil Additional inline styles
class Additional CSS classes
Type string Default nil
loading Whether spinner is loading
Type boolean Default true
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
size Spinner size
Type string Default "2"
style Additional inline styles
Type string Default nil

Examples

Size

Use the size prop to control the size of the spinner.

<.flex align="center" gap="4">
  <.spinner size="1" /><.spinner size="2" /><.spinner size="3" />
</.flex>

With buttons

Buttons have their own loading prop that automatically composes a spinner.

<.button loading>Bookmark</.button>
← Slider Switch →