Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Skeleton
Designer doc
Skeleton is an animated placeholder that shows the loading state of contents.
Example
Variants
There are 3 variants which are line, rect, circle.
line is the default variant, with 4 rows and last row having 70% width. Default height is 16px.
View code
circle variant has a default height of 24px.
View code
rect variant has a default height of 32px.
View code
Animation
The animation is by default enabled, though it can be enabled through passing prop animated as false.
View code
Customizing colors
Skeleton animation color can be customized with colorType and secondaryColorType props. Alternatively, color and secondaryColor props are also supported.
View code
Loading status for components
Skeleton can be used to wrap around other components to take the same height and width. loaded prop is used to hide skeleton when loading is completed. This is available for rect and circle variant.
View code
Skeleton can be used to show loading status in Table and TableData components too.
View code
References
API
Skeleton
| Prop name | Type | Default | Description |
|---|---|---|---|
| animated | boolean | true | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | neuBg2nd | |
| gap | number | ||
| height | string | number | ||
| loaded | boolean | ||
| radius | string | number | ||
| rows | number | 4 | |
| secondaryColor | string | ||
| secondaryColorType | ColorTypes | neuBg4th | |
| variant | string | line | |
| width | string | number | ||
| wrapperProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | Only applicable for line variant |