Skeleton
Use to show a placeholder while content is loading.
Loading preview…
1<script lang="ts">
2 import { Skeleton } from './index.js';
3</script>
4
5<div class="flex items-center space-x-4">
6 <Skeleton class="size-12 rounded-full" />
7 <div class="space-y-2">
8 <Skeleton class="h-4 w-[250px]" />
9 <Skeleton class="h-4 w-[200px]" />
10 </div>
11</div>
12Installation
1. Copy these files into your project
- ~/components/skeleton/skeleton.svelte
- ~/components/skeleton/index.ts
Usage
Use skeleton as a loading placeholder for content that has not arrived yet. Size and shape with
utility classes (h-*, w-*, rounded-*).
1<script lang="ts">
2 import { Skeleton } from '~/components/skeleton';
3</script>
4
5<div class="flex items-center space-x-4">
6 <Skeleton class="size-12 rounded-full" />
7 <div class="space-y-2">
8 <Skeleton class="h-4 w-[250px]" />
9 <Skeleton class="h-4 w-[200px]" />
10 </div>
11</div>