# 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