Skeleton
<Skeleton>TailwindCSS ModulesSkeleton is a placeholder for loading content. It displays a pulsing shape that mimics the layout of the content that is loading, reducing perceived latency.
InstallationColoxo CLI
npx coloxo add skeleton --style coloxo-cssES Module ImportPlayground / npm package
import { Skeleton } from '@coloxo/ui';Design Tokens:
--cx-color-skeleton: #E2E8F0--cx-radius-sm: 4px--cx-radius-full: 9999px--cx-radius-lg: 12px
1. Variant Matrix
Every variant rendered in its default configuration.
| Text | Circular | Rectangular | |
|---|---|---|---|
| Default |
2. Interactive Props Configurator
Experiment with the Skeleton props in real-time.
Visual Render Canvas
tsx
<Skeleton lines={3} />3. Dark theme
Calibrated for deep dashboard backgrounds, automatically adjusting its pulsing color.
Profile loading
Image card loading
4. Enterprise layout compositions
Demonstrating how skeletons are combined to represent complex loading states.
Recent Activity
Fetching transaction logs...
Accessibility
Decorative Element
Skeletons are inherently visual placeholders. They should be accompanied by aria-live regions or aria-busy elements to announce loading to screen readers.
Reduced Motion
The pulsing animation will automatically slow down or stop when users prefer reduced motion.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "text" | "circular" | "rectangular" | text | Shape. |