Partials·loomora/Loader
Loader
Renders one or more skeleton blocks with rounded, circle, square, sharp, or text treatments.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Loader } from 'loomora'
<Loader variant="text" counts={3} height="1rem" width="14rem" wrapperClassName="gap-2" />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | string | required | Height of each skeleton block. |
| width | number | string | '100%' | Width of each skeleton block. |
| counts | number | 1 | Number of blocks to render. |
| variant | 'rounded' | 'circle' | 'sharp' | 'square' | 'text' | 'rounded' | Skeleton shape and layout. |
| duration | number | 2.5 | Pulse animation duration in seconds. |