Spinner

Shows that something is busy for a short, unknown time.

<script setup lang="ts">
import { FsSpinner } from '@fivespark/ui'
</script>

<template>
  <span class="type-body flex items-center gap-2">
    <FsSpinner />
    Offerte opslaan…
  </span>
</template>

Usage

<script setup lang="ts">
import { FsSpinner } from '@fivespark/ui'
</script>

<template>
  <FsSpinner label="Orders laden…" :size="20" />
</template>

A spinner next to text that already says what is happening is decorative, and needs no label. A button that is busy has its own loading state. For content that loads for the first time, use Skeleton.

Examples

Sizes

16 is for controls and beside text, 20 for a spinner on its own, 24 for an empty region.

<script setup lang="ts">
import { FsSpinner } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-6">
    <FsSpinner label="Laden…" />
    <FsSpinner :size="20" label="Orders laden…" />
    <FsSpinner :size="24" label="Planning laden…" />
  </div>
</template>

Named

A spinner that stands alone has no text beside it, so give it a label. It is read out when the screen reader reaches it; the spinner itself is not a live region.

<script setup lang="ts">
import { FsSpinner } from '@fivespark/ui'
</script>

<template>
  <div class="flex min-h-24 w-full max-w-sm items-center justify-center">
    <FsSpinner :size="24" label="Klanten laden…" />
  </div>
</template>

API Reference

FsSpinner

Prop	Type	Default	Description
size	16 | 20 | 24	16	16 in controls and beside text, 20 standalone, 24 in an empty region.
label	string		Names a standalone spinner with visually hidden text. Without it, the spinner is decorative.