Spinner
A small loading indicator.
Example
<script lang="ts">
import { Spinner } from '@onlywin/ui-svelte';
</script>
<div class="example-row">
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" label="Loading games" />
</div>Usage
Do
- Use it inline, for short waits.
Don’t
- Do not use it for a whole page; use Skeleton.
Accessibility
- A status named “Loading”, or hidden inside something that already says it loads.
Props
The same props in both frameworks. In React, class is className, events are camelCase (onClick),
content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use,
and elementRef reaches the DOM element.
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | |
label | string | null | — | The status text for screen readers; `null` inside something that already says it loads. |
size | 'lg' | 'md' | 'sm' | 'md' |