component

Spinner

The Spinner component indicates ongoing processes, typically used to express an unspecified wait time or display the length of a process.

Source code in GitHub Spinner in Storybook

Set Up #

To use the Spinner component, import it into your Svelte file:

Example.svelte
<script>
	import { Spinner } from '@sans-ui/core';
</script>

Usage #

The Spinner component is used to show a loading indicator.

Example.svelte
<script>
	import { Spinner } from '@sans-ui/core';
</script>

<Spinner>Spinner</Spinner>

Variant #

The variant prop changes the color theme of the spinner.

Example.svelte
<script>
	import { Spinner } from '@sans-ui/core';
</script>

<Spinner variant="primary" />
<Spinner variant="secondary" />
<Spinner variant="success" />
<Spinner variant="warning" />
<Spinner variant="danger" />

Kind #

The kind prop defines the style of the spinner.

Example.svelte
<script>
	import { Spinner } from '@sans-ui/core';
</script>

<Spinner kind="loader1" />
<Spinner kind="loader2" />
<Spinner kind="loader3" />

Size #

The size prop sets the size of the spinner.

Example.svelte
<script>
	import { Spinner } from '@sans-ui/core';
</script>

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

Accessibility #

  • Supports 'alert' role via ARIA for better accessibility.

API #

Spinner provides APIs(Properties) that is necessary for you to configure a Spinner compponent.

Spinner Props #

Name Type Default Value
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' 'primary'
kind 'loader1' | 'loader2' | 'loader3' 'loader1'
size 'sm' | 'md' | 'lg' 'md'

Spinner Slots #

Name Description
base this slot is applied to the div element for spinner.
dot this slot is applied to the div element(those circling dots for `loader2`).
<Select Switch>