Skeleton Line - Kumo Svelte

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

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

Installation

Barrel

import { SkeletonLine } from 'kumo-svelte';

Granular

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';
</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';
</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 px) or any CSS string value.

32px

48px

64px

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

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

Card Loading State

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

<script lang="ts">
  import { SkeletonLine } from 'kumo-svelte';
</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

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