Skip to main content

Svelte Examples

These examples use Svelte components for primitives and core utility classes for layout, sizing, and spacing.

Profile Row​

<script lang="ts">
  import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/svelte";
</script>

<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-80" />
      </div>
    </div>
  </Skeleton>
</section>

Profile row

Article Card​

<script lang="ts">
  import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/svelte";
</script>

<Skeleton animation="shimmer">
  <div class="sk-stack sk-gap-md">
    <SkeletonBox class="sk-ratio-16-9" />
    <SkeletonLine class="sk-w-70 sk-h-lg" />
    <SkeletonLine class="sk-w-100" />
    <SkeletonLine class="sk-w-90" />
    <SkeletonLine class="sk-w-60" />
  </div>
</Skeleton>

Article card

Product Card​

<script lang="ts">
  import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/svelte";
</script>

<Skeleton animation="wave">
  <div class="sk-stack sk-gap-md">
    <SkeletonBox class="sk-ratio-4-3" />
    <SkeletonLine class="sk-w-80 sk-h-lg" />
    <div class="sk-row-between">
      <SkeletonLine class="sk-w-30" />
      <SkeletonBox class="sk-button sk-w-30" />
    </div>
  </div>
</Skeleton>

Product card

Loading List​

<script lang="ts">
  import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/svelte";
</script>

<Skeleton as="ul" class="sk-stack">
  {#each Array.from({ length: 3 }) as _, index}
    <li class="sk-row">
      <SkeletonBox class="sk-icon" />
      <SkeletonLine
        class={[
          "sk-flex-1",
          index === 1 && "sk-w-80",
          index === 2 && "sk-w-60",
        ]
          .filter(Boolean)
          .join(" ")}
      />
    </li>
  {/each}
</Skeleton>

Loading list