Kappa / Skeleton Line

<script setup>
import { SkeletonLine } from "@dicehub/kappa/components/skeleton-line";
</script>

<template>
  <section aria-busy="true">
    <span role="status" class="visually-hidden">Loading recent activity</span>
    <article v-for="item in 3" :key="item">
      <SkeletonLine :width="40" :height="40" class="activity-avatar" />
      <div>
        <SkeletonLine width="72%" />
        <SkeletonLine width="46%" />
      </div>
    </article>
  </section>
</template>

Installation

Skeleton Line is part of the main Kappa package. It has no runtime state machine or dependency beyond Vue.

Barrel

import { SkeletonLine } from "@dicehub/kappa";

Granular

import { SkeletonLine } from "@dicehub/kappa/components/skeleton-line";

Usage

Match each line to the content that will replace it. Put the loading status on the surrounding region because every Skeleton Line is decorative.

<script setup>
import { SkeletonLine } from "@dicehub/kappa/components/skeleton-line";
</script>

<template>
  <div aria-busy="true">
    <span role="status" class="visually-hidden">Loading article</span>
    <SkeletonLine />
    <SkeletonLine width="78%" />
    <SkeletonLine width="52%" />
  </div>
</template>

Design

Use width and height for exact placeholder dimensions. The composition examples cover text, card, and table placeholders.

Kappa uses exact width and height values instead of random ranges. This keeps server output, hydration, screenshots, and reserved layout stable. The scan uses one calm motion pattern and stops when reduced motion is active.

Examples

Exact Widths

Use CSS lengths or positive pixel numbers to reserve the expected line width.

<SkeletonLine />
<SkeletonLine width="78%" />
<SkeletonLine width="52%" />
<SkeletonLine :width="112" />

Heights

Change the line thickness to match the text or control that is loading.

<SkeletonLine :height="8" />
<SkeletonLine :height="12" />
<SkeletonLine :height="20" />

Block Height

Reserve a taller row and keep the line vertically centered in that space.

32 px

48 px

4 rem

<SkeletonLine :block-height="32" width="64%" />
<SkeletonLine :block-height="48" width="72%" />
<SkeletonLine block-height="4rem" width="56%" />

Card

Combine fixed and flexible lines to keep a profile surface stable while it loads.

<section class="profile-card" aria-busy="true">
  <span role="status" class="visually-hidden">Loading profile</span>
  <SkeletonLine :width="48" :height="48" class="profile-avatar" />
  <div>
    <SkeletonLine width="9rem" :height="12" />
    <SkeletonLine width="6rem" />
  </div>
</section>

Table

Repeat the expected column structure without inventing temporary data.

<div class="table-loading" aria-busy="true">
  <span role="status" class="visually-hidden">Loading records</span>
  <div v-for="row in 4" :key="row" class="table-loading__row">
    <SkeletonLine width="55%" />
    <SkeletonLine width="38%" />
    <SkeletonLine width="62%" />
  </div>
</div>

Static

Disable the scan when motion does not add useful loading feedback.

<SkeletonLine :animated="false" width="72%" />

Accessibility

Skeleton Line is always decorative and has aria-hidden="true".
Set aria-busy="true" on the region that will receive the content.
Add one short status message for the whole loading region.
Replace the complete skeleton region when the content is ready.
Show an error or empty state if loading cannot finish.
Use a progress indicator when the application knows the completion value.

API Reference

SkeletonLine

Renders a decorative span and forwards native attributes to the visible line.

Prop	Type	Default	Description
`width`	`string \| number`	`"100%"`	Sets an exact CSS width. Positive numbers use pixels.
`height`	`string \| number`	`"0.5rem"`	Sets an exact CSS height. Positive numbers use pixels.
`blockHeight`	`string \| number`	`—`	Adds a container that vertically centers the line at the given height.
`animated`	`boolean`	`true`	Enables the restrained loading scan. Reduced-motion settings always stop it.

Exports

Export	Description
`SkeletonLine`	Decorative loading placeholder with deterministic geometry.
`SkeletonLineProps`	Public geometry and animation prop contract.
`SkeletonLineLength`	String or numeric CSS length accepted by geometry props.
`SKELETON_LINE_DEFAULT_WIDTH`	Default full-width line value.
`SKELETON_LINE_DEFAULT_HEIGHT`	Default 0.5 rem line height.
`resolveSkeletonLineLength`	Safe CSS-length resolver used by geometry props.