Spinner

A loading indicator that displays a circular spinning animation.

Anatomy

<script>
  import { Spinner } from "@saas-ui/svelte/components/spinner";
</script>

<Spinner />

Examples

Animation Duration Accessibility

Use the animationDuration prop to control the rotation speed of the spinner animation.

Basic Accessibility

Basic spinner with default styling.

<Spinner />

Border Width Accessibility

Use the borderWidth prop to adjust the stroke width of the spinner ring.

Colours Accessibility

Use the colour prop to change the colour of the spinner.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={4} class="items-center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Spinner size="sm" {colour} />
			<Spinner size="md" {colour} />
			<Spinner size="lg" {colour} />
		</HStack>
	{/each}
</VStack>

Sizes Accessibility

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

<HStack align="start" gap={4} class="flex-wrap">
	{#each spinnerSizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<Spinner {size} />
		</VStack>
	{/each}
</HStack>

Track Colour Accessibility

Use the trackColour prop to change the colour of the spinner track (the non-spinning background).

<HStack gap={4}>
	<Spinner colour="red" trackColour="gray" />
	<Spinner colour="blue" trackColour="gray" />
	<Spinner colour="green" trackColour="gray" />
</HStack>

With Label Accessibility

Combine spinner with text for a loading indicator.

<VStack gap={2} class="items-center">
	<Spinner colour="teal" />
	<Text size="sm" class="text-teal-fg">Loading...</Text>
</VStack>

Props

Prop	Type	Default	Description
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the spinner.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	-	The colour of the spinner.
`label`	`text`	`Loading`	Accessible label for screen readers.
`animationDuration`	`text`	`0.5s`	The animation duration.
`borderWidth`	`text`	`2px`	The border width (thickness) of the spinner.
`trackColour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	-	The track colour palette of the spinner.
`class`	`text`	-	CSS class to apply to the component.