Skeleton

Loading placeholder with pulse animation. Text, circular, and rectangular variants with configurable dimensions.

feedback v0.5.0

Playground

Examples

All variants

<cg-stack gap="lg" style="max-width:320px;"><cg-skeleton variant="rectangular" width="100%" height="120px"></cg-skeleton><div style="display:flex;gap:12px;align-items:center;"><cg-skeleton variant="circular" width="48px" height="48px"></cg-skeleton><div style="flex:1;"><cg-skeleton variant="text" lines="2"></cg-skeleton></div></div></cg-stack>

Card placeholder

<div style="max-width:320px;padding:16px;border-radius:12px;border:1px solid var(--cg-color-surface-container-border);"><cg-stack gap="md"><cg-skeleton variant="rectangular" height="160px" rounded="md"></cg-skeleton><cg-skeleton variant="text" lines="2"></cg-skeleton><div style="display:flex;gap:8px;"><cg-skeleton variant="rectangular" width="80px" height="32px" rounded="full"></cg-skeleton><cg-skeleton variant="rectangular" width="80px" height="32px" rounded="full"></cg-skeleton></div></cg-stack></div>

List placeholder

${[1,2,3].map(() => `

`).join("")}

<cg-stack gap="md" style="max-width:320px;">${[1,2,3].map(() => `<div style="display:flex;gap:12px;align-items:center;"><cg-skeleton variant="circular" width="40px" height="40px"></cg-skeleton><div style="flex:1;"><cg-skeleton variant="text" lines="1" width="60%"></cg-skeleton><div style="margin-top:6px;"><cg-skeleton variant="text" lines="1" width="90%"></cg-skeleton></div></div></div>`).join("")}</cg-stack>

Static (no animation)

<cg-skeleton variant="rectangular" width="200px" height="60px" animated="false"></cg-skeleton>

Import

import { CgSkeleton } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-skeleton';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`variant`	"text" \| "circular" \| "rectangular"	"rectangular"	Shape variant
`width`	string	"100%"	Width (CSS value)
`height`	string	""	Height (CSS value, auto per variant)
`lines`	number	3	Number of text lines (text variant only)
`animated`	boolean	true	Enable pulse animation
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	Border radius variant