Skeleton
Placeholder animation during data fetching.
Contract
Section titled “Contract”Overview
Machine-readable contract from Component Spec.
component: skeletonexport: Skeletonversion: 1attributes: data-refineui=skeleton
Anatomy
| Part | data-refineui |
|---|---|
| root | skeleton |
Accessibility
| Slot | Element |
|---|---|
| skeleton | div |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
Installation
Section titled “Installation”npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokensimport { Skeleton } from "@refineui/react";
<Skeleton width={200} height={20} />
<Skeleton width="100%" height={100} shape="circle" />API Reference
Section titled “API Reference”| Prop | Default | Type | Description |
|---|---|---|---|
| width | — | number | string | Skeleton width in pixels or CSS value. |
| height | — | number | string | Skeleton height in pixels or CSS value. |
| shape | "rectangle" | "rectangle" | "circle" | Shape of the skeleton. |