<script lang="ts">
  import { SkeletonLine } from "kumo-svelte/components/loader";
</script>

<div class="flex w-64 flex-col gap-3">
  <SkeletonLine />
  <SkeletonLine />
  <SkeletonLine />
</div>

Import

import { SkeletonLine } from "kumo-svelte/components/loader";

Custom Widths

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

<script lang="ts">
  import { SkeletonLine } from "kumo-svelte/components/loader";
</script>

<div class="flex w-64 flex-col gap-3">
  <SkeletonLine minWidth={80} maxWidth={100} />
  <SkeletonLine minWidth={60} maxWidth={80} />
  <SkeletonLine minWidth={40} maxWidth={60} />
</div>

Custom Height

Override the default height using Tailwind utility classes via class. The default height is 0.5rem.

<script lang="ts">
  import { SkeletonLine } from "kumo-svelte/components/loader";
</script>

<div class="flex w-64 flex-col gap-3">
  <SkeletonLine class="h-2" />
  <SkeletonLine class="h-4" />
  <SkeletonLine class="h-6" />
  <SkeletonLine class="h-8" />
</div>

Block Height

Use blockHeight to set the height of a container that vertically centers the skeleton line. Useful when replacing text of a known line height. Accepts a number, treated as pixels, or any CSS string value.

32px

48px

64px

<script lang="ts">
  import { SkeletonLine } from "kumo-svelte/components/loader";
</script>

<div class="flex w-64 flex-col gap-1">
  <div class="relative">
    <div class="absolute top-0 right-full bottom-0 mr-2 flex items-center border-r-2 border-kumo-fill pr-2 text-sm">32px</div>
    <SkeletonLine blockHeight={32} />
  </div>
  <div class="relative">
    <div class="absolute top-0 right-full bottom-0 mr-2 flex items-center border-r-2 border-kumo-fill pr-2 text-sm">48px</div>
    <SkeletonLine blockHeight={48} />
  </div>
  <div class="relative">
    <div class="absolute top-0 right-full bottom-0 mr-2 flex items-center border-r-2 border-kumo-fill pr-2 text-sm">64px</div>
    <SkeletonLine blockHeight={64} />
  </div>
</div>

Card Loading State

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

<script lang="ts">
  import { SkeletonLine } from "kumo-svelte/components/loader";
</script>

<div class="w-64 rounded-lg p-4 ring ring-kumo-hairline">
  <div class="mb-4 h-4">
    <SkeletonLine minWidth={40} maxWidth={60} />
  </div>
  <div class="flex flex-col gap-2">
    <SkeletonLine />
    <SkeletonLine />
    <SkeletonLine minWidth={50} maxWidth={70} />
  </div>
</div>

API Reference

SkeletonLine

Prop	Type	Default
blockHeight	`string \| number`	—
class	`string`	—
maxDelay	`number`	`0.5`
maxDuration	`number`	`1.7`
maxWidth	`number`	`100`
minDelay	`number`	`0`
minDuration	`number`	`1.3`
minWidth	`number`	`30`