Phi / Skeleton Line

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

<template>
  <div class="skeleton-line-stack">
    <SkeletonLine />
    <SkeletonLine />
    <SkeletonLine />
  </div>
</template>

Installation

Barrel

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

Granular

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

Examples

Custom Widths

Control the randomized width range for more natural-looking skeletons.

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

<template>
  <div class="skeleton-line-stack">
    <SkeletonLine :min-width="80" :max-width="100" />
    <SkeletonLine :min-width="60" :max-width="80" />
    <SkeletonLine :min-width="40" :max-width="60" />
  </div>
</template>

Custom Height

Override the default height using CSS classes via className. The default height is 0.5rem.

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

<template>
  <div class="skeleton-line-stack">
    <SkeletonLine class-name="h-2" />
    <SkeletonLine class-name="h-4" />
    <SkeletonLine class-name="h-6" />
    <SkeletonLine class-name="h-8" />
  </div>
</template>

Block Height

Use blockHeight to set the height of a container that vertically centers the skeleton line. Numbers are treated as px; strings are passed through as CSS values.

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

<template>
  <div class="skeleton-line-stack skeleton-line-block-demo">
    <div class="skeleton-line-block-demo__row">
      <span>32px</span>
      <SkeletonLine :block-height="32" />
    </div>
    <div class="skeleton-line-block-demo__row">
      <span>48px</span>
      <SkeletonLine :block-height="48" />
    </div>
    <div class="skeleton-line-block-demo__row">
      <span>64px</span>
      <SkeletonLine :block-height="64" />
    </div>
  </div>
</template>

Card Loading State

Use skeleton lines to create loading states for cards and content areas.

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

<template>
  <div class="skeleton-card">
    <div class="skeleton-card__title">
      <SkeletonLine :min-width="40" :max-width="60" />
    </div>
    <div class="skeleton-line-stack skeleton-line-stack--compact">
      <SkeletonLine />
      <SkeletonLine />
      <SkeletonLine :min-width="50" :max-width="70" />
    </div>
  </div>
</template>

API Reference

Prop	Type	Default	Description
`minWidth`	`number`	`30`	Minimum randomized line width as a percentage.
`maxWidth`	`number`	`100`	Maximum randomized line width as a percentage.
`minDuration`	`number`	`1.3`	Minimum shimmer animation duration in seconds.
`maxDuration`	`number`	`1.7`	Maximum shimmer animation duration in seconds.
`minDelay`	`number`	`0`	Minimum shimmer animation delay in seconds.
`maxDelay`	`number`	`0.5`	Maximum shimmer animation delay in seconds.
`blockHeight`	`string \| number`	`-`	Optional block height that vertically centers the line.
`className`	`string`	`-`	Additional CSS classes applied to the skeleton line.