Skeleton
Enhance the perceived performance of your application by using rothko ui's Skeleton component. Display placeholder content that mimics the actual data, giving users a visual indication of loading or content areas before they are fully rendered.
Import
- Global
- Single
import { SkeletonBoxWithLabel, SkeletonBuilder } from '@rothko-ui/react';
Usage
Box with Label
- Example
- Code
Box
- Example
- Code
Custom
- Example
- Code
Props
| Name | Type | Default | Description |
|---|---|---|---|
Name backgroundColor | Type Color | Default | Description Background color of the skeleton |
Name foregroundColor | Type Color | Default | Description Foreground color of the skeleton |
Name gradientProps | Type SVGAttributes<SVGLinearGradientElement> | Default | Description Props for the SVG linear gradient element |
Name speed | Type number | Default 1.5 | Description Speed factor of the skeleton animation in seconds |