Skeleton
import {Skeleton} from '@gravity-ui/uikit';
The Skeleton component displays a placeholder preview of your content before the data gets loaded. This preview is shown in order to reduce the loading time frustration.
Animation
Use the animation prop to control the loading animation. The default is 'gradient'.
| Value | Description |
|---|---|
'gradient' | Sliding gradient shimmer — default |
'pulse' | Opacity pulse |
'none' | No animation |
Variant
Use the variant prop to choose a preset appearance. The default is 'rect'.
| Value | Description |
|---|---|
'rect' | Rounded corners using a size-aware border-radius token — default |
'circle' | Fully circular (border-radius: 50%, aspect-ratio: 1) |
'square' | Square aspect ratio (aspect-ratio: 1) with the same rounding as 'rect' |
'text' | Text line placeholder — height inherits font-size and line-height from parent context |
Size
Use the size prop to set a preset skeleton height (and width for 'circle' / 'square' variants). Each size also adjusts the border-radius token used by 'rect' and 'square' variants. When size is omitted, set dimensions with width and height instead.
| Value | Description |
|---|---|
'xs' | Extra small |
's' | Small |
'm' | Medium |
'l' | Large |
'xl' | Extra large |
Text placeholder
Use variant="text" to render a skeleton that inherits font-size and line-height from the parent context. Place multiple skeletons inside a <Text variant="..."> element for multiline placeholders.
Properties
| Name | Description | Type | Default |
|---|---|---|---|
style | Custom CSS properties for the root element | React.CSSProperties | |
className | Custom CSS class for the root element | string | |
qa | data-qa HTML attribute, used for testing | string | |
animation | Animation type to apply to the skeleton | 'gradient' | 'pulse' | 'none' | gradient |
variant | Preset appearance. 'circle' and 'square' enforce aspect-ratio: 1. 'text' inherits typography from parent context. | 'rect' | 'square' | 'circle' | 'text' | rect |
size | Preset height (and width for 'circle'/'square' variants). Also controls the border-radius token for 'rect'/'square'. | 'xs' | 's' | 'm' | 'l' | 'xl' | |
width | Custom width. Alias for style.width | number | string | |
height | Custom height. Alias for style.height | number | string |