# Skeleton (fw-skeleton)
fw-skeleton provides a way to render placeholder content until the original content is available. Provides a good UX when dealing with progessive loading of contents.
# Demo
Skeleton with multiple variants
Show Code
Skeleton with different effects
Show Code
Skeleton with custom properties
Show Code
Card Layout
Show Code
Multi Para Layout
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
count | count | Number of rows of current skeleton type | number | 1 |
customStyles | custom-styles | Custom css styles (background/margins/width/height etc.) | string \| { [key: string]: string; } | {} |
effect | effect | Effect the skeleton will use. | "none" \| "pulse" \| "sheen" | 'pulse' |
height | height | Height of the skeleton ex. 100px, 100%, auto etc. | string | null |
marginBottom | margin-bottom | MarginBottom of the skeleton ex. 10px, 0 etc. | string | null |
variant | variant | Variant of the skeleton - circle or rectangle or text | "circle" \| "rect" \| "text" | 'text' |
width | width | Width of the skeleton ex. 100px, 100%, auto etc. | string | null |
# Shadow Parts
Part | Description |
---|---|
"base" |
# CSS Custom Properties
Name | Description |
---|---|
--fw-skeleton-background | Skeleton background: Default: #cfd7df |
--fw-skeleton-border-radius | Skeleton border-radius: Default: 999px for the text, 50% for the circle, 0px for the rect |
--fw-skeleton-height | Skeleton height: Default: 16px for the text and rect, 32px for the circle |
--fw-skeleton-margin-bottom | Skeleton margin-bottom: Default: 8px/0px(when count is 1) |
--fw-skeleton-sheen-color | Skeleton Sheen effect color: Default: #b1bdc8 |
--fw-skeleton-width | Skeleton width: Default: 100% for the text and rect, 32px for the circle |
# Dependencies
# Used by
# Graph
graph TD;
fw-data-table --> fw-skeleton
style fw-skeleton fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks