Skeleton
Visually indicates content loading
Import
ts
ts
Features
- Support for custom width and height.
- Support for circle skeleton.
- Can toggle visiblity and animation properties.
Anatomy
The skeleton consists of:
- Skeleton.Root: The root container for a skeleton.
tsx
tsx
Example
A UI toolkit for building accessible web apps and design systems with SolidJS.
Usage
Multiple skeletons
Kobalte
A UI toolkit for building accessible web apps and design systems with SolidJS.
Toggle example
A UI toolkit for building accessible web apps and design systems with SolidJS.
API Reference
Skeleton.Root
| Prop | Description |
|---|---|
| visible | boolean The visible state of the Skeleton. Sets the data-visible data attribute. |
| animate | boolean Whether the skeleton should animate. Sets the data-animate data attribute. |
| width | number The width of the skeleton in px. Defaults to 100%. |
| height | number The height of the skeleton in px. Defaults to auto. |
| radius | number Roundness of the skeleton in px. Sets border-radius. |
| circle | boolean Whether the skeleton should be a circle. Sets border-radius and width to the height. |
| children | JSX.Element The children of the Skeleton. |
| Data attribute | Description |
|---|---|
| data-visible | Present when the Skeleton is visible. |
| data-animate | Present when the Skeleton can animate. |
Rendered elements
| Component | Default rendered element |
|---|---|
Skeleton.Root | div |