Skeleton

Placeholder loading indicators that mimic the shape of content before it loads.

Basic

<VxSkeleton />
<VxSkeleton />
<VxSkeleton width="60%" />

Variants

<VxSkeleton variant="text" />
<VxSkeleton variant="circular" />
<VxSkeleton variant="rectangular" :height="100" />
<VxSkeleton variant="rounded" :height="100" />

Animations

Wave (default)

Pulse

None

<VxSkeleton animation="wave" />
<VxSkeleton animation="pulse" />
<VxSkeleton animation="none" />

Multi-line Text

Use lines to generate a paragraph-like skeleton. The last line is automatically shorter for a natural look.

<VxSkeleton :lines="3" />
<VxSkeleton :lines="5" />

Custom Sizes

<VxSkeleton variant="circular" :width="32" :height="32" />
<VxSkeleton variant="circular" :width="48" :height="48" />
<VxSkeleton variant="circular" :width="64" :height="64" />
<VxSkeleton variant="rounded" :width="200" :height="120" />

Custom Border Radius

<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="0" />
<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="8" />
<VxSkeleton variant="rectangular" :width="120" :height="80" :rounded="24" />

Card Composition

Combine skeletons to build realistic loading placeholders.

<div class="card">
  <VxSkeleton variant="rounded" :height="160" />
  <div class="card-header">
    <VxSkeleton variant="circular" :width="40" :height="40" />
    <div>
      <VxSkeleton width="60%" />
      <VxSkeleton width="40%" />
    </div>
  </div>
  <VxSkeleton :lines="3" />
</div>

Loading State

Use the loading prop to toggle between the skeleton and real content.

<script setup>
import { ref } from 'vue'
const loaded = ref(false)
</script>

<template>
  <VxSkeleton variant="circular" :width="48" :height="48" :loading="!loaded">
    <VxAvatar size="lg" name="Jane Doe" />
  </VxSkeleton>

  <VxSkeleton width="50%" :loading="!loaded">
    <span>Jane Doe</span>
  </VxSkeleton>

  <VxSkeleton :lines="2" :loading="!loaded">
    <p>Building delightful user interfaces...</p>
  </VxSkeleton>
</template>

API

Props

Prop	Type	Default	Description
variant	'text' | 'circular' | 'rectangular' | 'rounded'	'text'	Shape of the skeleton
animation	'wave' | 'pulse' | 'none'	'wave'	Animation type
width	string | number	—	Custom width (number treated as px)
height	string | number	—	Custom height (number treated as px)
rounded	string | number	—	Custom border radius override
loading	boolean	true	Show skeleton when true, default slot when false
lines	number	1	Number of text lines to render

Slots

Slot	Description
default	Content shown when loading is false