Skeleton
A placeholder for loading content.
<script lang="ts">
import { Skeleton } from "coss-svelte";
</script>
<div class="flex w-full max-w-md flex-col gap-8">
{#each [0, 1, 2] as row (row)}
<div class="flex items-center gap-4">
<Skeleton class="size-10 shrink-0 rounded-full" />
<div class="grid flex-1 gap-2">
<Skeleton class="h-4 w-full" />
<div class="flex gap-2">
<Skeleton class="h-4 w-2/5" />
<Skeleton class="h-4 w-2/5" />
</div>
</div>
<Skeleton class="h-8 w-24 shrink-0 rounded-lg" />
</div>
{/each}
</div>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Skeleton } from "coss-svelte";Anatomy
Skeleton exposes a single component export for the current implementation.
API Reference
Skeleton
A placeholder for loading content.
children : Snippet<[]>Inherits from Svelte <div> attributes.
Implementation Details
- Status
- Stable
- Foundation
- native
- Category
- Feedback & Status
- Particles
- 2