Skeleton

Stands in for content that is loading for the first time, in the shape of what will replace it.

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

<template>
  <FsSkeleton :lines="3" label="Offerte laden" class="w-full max-w-sm" />
</template>

Usage

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

<template>
  <FsSkeleton :lines="3" label="Offerte laden" />
</template>

A skeleton is silent unless it has a label; give one skeleton in a region the label that says what is loading. For a short wait inside a control, use Spinner.

Examples

Text

Each line takes the metrics of a type role, so the page does not jump when the text arrives. Set the width with a class; the last of several lines is shorter.

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

<template>
  <div class="flex w-full max-w-sm flex-col gap-3">
    <FsSkeleton type="page-title" class="w-48" label="Pagina laden" />
    <FsSkeleton type="meta" class="w-24" />
    <FsSkeleton :lines="2" />
  </div>
</template>

Circle

For an avatar. size is one of the avatar's sizes: 20, 24, 32 or 36.

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

<template>
  <div class="flex items-center gap-3">
    <FsSkeleton shape="circle" :size="32" label="Medewerkers laden" />
    <div class="flex-1">
      <FsSkeleton type="label" class="w-40" />
      <FsSkeleton type="meta" class="w-24" />
    </div>
  </div>
</template>

Block

For anything else, such as a chart or an image. The page sizes it with classes.

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

<template>
  <FsSkeleton shape="block" class="h-32 w-full max-w-sm" label="Grafiek laden" />
</template>

API Reference

FsSkeleton

Prop	Type	Default	Description
shape	"circle" | "block" | "text"	"text"	What it stands in for: lines of text, an avatar, or anything else as a block the page sizes with classes.
type	"label" | "meta" | "body" | "figure" | "body-lg" | "region-title" | "section-title" | "figure-lg" | "page-title"		For text, `body` when not given: the type role of the text that will replace it.
lines	number		For text, 1 when not given: how many lines. The last of several is shorter.
size	20 | 24 | 32 | 36		For a circle, 24 when not given: the size of the avatar it stands in for.
label	string		Hidden text saying what is loading, such as "Omzet laden". One skeleton in a region carries it.