Vue Usage

Import the stylesheet once, then compose skeletons with Vue components and core utility classes.

<script setup lang="ts">
import "@skelia/vue/styles.css";
import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/vue";
</script>

<template>
  <section aria-busy="true">
    <span class="sk-sr-only">Loading profile</span>

    <Skeleton>
      <div class="sk-row">
        <SkeletonAvatar />

        <div class="sk-stack sk-flex-1 sk-gap-sm">
          <SkeletonLine class="sk-w-40" />
          <SkeletonLine class="sk-w-70" />
        </div>
      </div>
    </Skeleton>
  </section>
</template>

Root Skeleton

Use Skeleton as the visual wrapper for one loading block. It renders a div by default, applies the sk root class, and uses the shimmer animation unless you choose another animation.

<Skeleton animation="pulse">
  <SkeletonLine class="sk-w-80" />
</Skeleton>

Available animation values:

Value	Output class	Behavior
shimmer	sk-shimmer	Moving gradient shimmer
pulse	sk-pulse	Opacity pulse
wave	sk-wave	Subtle scale and opacity wave
none	sk-none	No animation

Render Another Element

Use the as prop when the skeleton wrapper should render a different element.

<Skeleton as="li" animation="wave">
  <div class="sk-row">
    <SkeletonAvatar />
    <SkeletonLine class="sk-flex-1" />
  </div>
</Skeleton>

Styling

Pass core utility classes through class. Component classes and custom classes are merged together.

<SkeletonBox class="sk-ratio-16-9 sk-rounded-xl" />
<SkeletonLine class="sk-w-60 sk-h-lg" />
<SkeletonCircle class="sk-size-lg" />

You can also theme the block with CSS custom properties on Skeleton:

<Skeleton
  class="product-loading"
  :style="{
    '--sk-color': '#dbeafe',
    '--sk-highlight': '#bfdbfe',
    '--sk-radius': '0.875rem',
  }"
>
  <SkeletonBox class="sk-ratio-4-3" />
  <SkeletonLine class="sk-w-80" />
</Skeleton>