Skeleton
Skeleton placeholder.
Walkthrough
1. Shapes
Skeletons should match the shape of what is coming, or the page jumps when the real thing lands.
<script lang="ts"> import { Skeleton } from 'omaris';</script><div class="flex w-full max-w-md items-start gap-4"> <Skeleton shape="circle" class="size-10" /> <div class="flex min-w-0 flex-1 flex-col gap-2"> <Skeleton shape="text" class="w-1/3" /> <Skeleton shape="text" lines={3} /> </div></div>2. Animation
The shimmer rests for the last part of its cycle, so a wall of skeletons does not strobe. none respects a user who has asked for less motion.
shimmer pulse none <script lang="ts"> import { Skeleton } from 'omaris';</script><div class="flex w-full max-w-md flex-col gap-4"> <div class="flex flex-col gap-1.5"> <code class="text-label-sm text-muted-foreground">shimmer</code> <Skeleton animation="shimmer" class="h-10 w-full" /> </div> <div class="flex flex-col gap-1.5"> <code class="text-label-sm text-muted-foreground">pulse</code> <Skeleton animation="pulse" class="h-10 w-full" /> </div> <div class="flex flex-col gap-1.5"> <code class="text-label-sm text-muted-foreground">none</code> <Skeleton animation="none" class="h-10 w-full" /> </div></div>