Table of Contents
Skeleton
A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
Used for this
- Skeleton is the default loader, used whenever the system can predict the format of the loading content
- To progressively load different parts of a page
- To avoid large layout shifts
How to use it
Default
Skeleton loaders are the same color as the text color at 10% opacity.
Light
Skeleton loaders can be inverted for use on dark backgrounds.
Size
By default, a Skeleton loader’s height is 60% of the font size. To make placeholders for other components, such as buttons, height and width can be explicitly set.
Configuration
- Name9.1.0•View source•View on npm
- Installnpm install @zendeskgarden/react-loaders
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Skeleton } from '@zendeskgarden/react-loaders'
API
Skeleton
Extends HTMLAttributes<HTMLDivElement>
Prop name | Type | Default | Description |
---|---|---|---|
height | string | '100%' | Sets the height as a percentage of parent element's height if the height is not already inherited by |
isLight | boolean | Inverts the color for use on dark backgrounds | |
width | string | '100%' | Sets the width as a percentage of the the parent element's width |