Alert Avatar AvatarGroup Button ButtonGroup Checkbox CheckboxGroup FilePicker Form FormRow Hamburger Input Modal Option Radio RadioGroup Rating Select Spinner Textarea Toast Tooltip Toggle

Spinner

Spinners are used to indicate to the user that the interface is waiting for an action to complete such as a server-side operation that is taking a long time. There options for different variants of spinners and sizes. This component is also used with the Button component to indicate loading state.

Example

A default Spinner will render a circle-bars variant with the brand color scheme.

<script>
  import { Spinner } from '$lib/ui';
</script>

<Spinner />

Circle Bars Variant

<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Circle Strip Variant

<Spinner variant="circle-strip" size="xs" />
<Spinner variant="circle-strip" size="sm" />
<Spinner variant="circle-strip" size="md" />
<Spinner variant="circle-strip" size="lg" />
<Spinner variant="circle-strip" size="xl" />

Circle Dots Variant

<Spinner variant="circle-dots" size="xs" />
<Spinner variant="circle-dots" size="sm" />
<Spinner variant="circle-dots" size="md" />
<Spinner variant="circle-dots" size="lg" />
<Spinner variant="circle-dots" size="xl" />

Dots Bounce Variant

<Spinner variant="dots-bounce" size="xs" />
<Spinner variant="dots-bounce" size="sm" />
<Spinner variant="dots-bounce" size="md" />
<Spinner variant="dots-bounce" size="lg" />
<Spinner variant="dots-bounce" size="xl" />

Dots Fade Variant

<Spinner variant="dots-fade" size="xs" />
<Spinner variant="dots-fade" size="sm" />
<Spinner variant="dots-fade" size="md" />
<Spinner variant="dots-fade" size="lg" />
<Spinner variant="dots-fade" size="xl" />

Dots Scale Variant

<Spinner variant="dots-scale" size="xs" />
<Spinner variant="dots-scale" size="sm" />
<Spinner variant="dots-scale" size="md" />
<Spinner variant="dots-scale" size="lg" />
<Spinner variant="dots-scale" size="xl" />

Dots Shuffle Variant

<Spinner variant="dots-shuffle" size="xs" />
<Spinner variant="dots-shuffle" size="sm" />
<Spinner variant="dots-shuffle" size="md" />
<Spinner variant="dots-shuffle" size="lg" />
<Spinner variant="dots-shuffle" size="xl" />

Spinner Component Props

Name	Type	Default	Description
`variant`	String: 'circle-bars', 'circle-strip', 'circle-dots', 'dots-bounce', 'dots-fade', 'dots-scale', 'dots-shuffle'	'circle-bars'	Spinner style variant
`size`	String: 'xs', 'sm', 'md', 'lg', 'xl'	'md'	Spinner size
`class`	String		CSS classes declared in global scope can be applied to the outermost element
`...`			Additional props will be passed through to the HTML element enabling support for things like `on:click`, etc

Spinner CSS Custom Properties

Name	Type	Default	Description
`--ui-spinner-color`	Color	`--ui-focus` or `#3b82f6`	Color of spinner