Placeholder in the shape of a list of rows, shown while the rows themselves are loading. The Rows page describes it in full.
Props
| Property | Type | Description |
|---|
count | numberundefined | How many placeholder rows to draw. Default: 25. |
style | CSSPropertiesundefined | Inline style applied to every placeholder row. |
title | stringundefined | Accessible name given to every shape; empty by default, which leaves them unnamed. Default: "". |
className | stringundefined | Class added to every placeholder row. |
x | stringundefined | Ignored: the rows place their shapes themselves. |
y | stringundefined | Ignored: the rows place their shapes themselves. |
width | stringundefined | Ignored: the rows size their shapes themselves. |
height | stringundefined | Ignored: the rows size their shapes themselves. |
borderRadius | stringundefined | Corner radius of the square and bar shapes, in pixels. Default: 3. |
backgroundColor | stringundefined | Colour of the shapes at rest, drawn at backgroundOpacity; black in every theme. Default: #000. |
foregroundColor | stringundefined | Colour of the band that sweeps across the shapes, drawn at foregroundOpacity. Default: #000. |
backgroundOpacity | numberundefined | Opacity of backgroundColor, from 0 to 1. Default: 0.1. |
foregroundOpacity | numberundefined | Opacity of foregroundColor, from 0 to 1. Default: 0.15. |
speed | numberundefined | Duration of one sweep of the band, in seconds. Default: 2. |
animate | booleanundefined | Whether the light band sweeps across the shapes; turn it off for a still placeholder. Default: true. |
uniqueKey | stringundefined | Ignored: every shape takes an id of its own. |
Stories
Default
Five placeholder rows (count) with the band sweeping across them, as a list shows them while its first page loads. Change any other prop live in the Controls panel below.
Static Placeholder
A placeholder that does not move, for a reader who asked for less motion: the band no longer sweeps across the shapes (animate). The component does not check the system's reduced-motion setting itself.
Round Start Element
Rows for a list of people, whose start element is a round avatar: each RowSkeleton draws a circle in place of the square (isRectangle={false}). RowsSkeleton has no such prop, so a list of round rows is built from RowSkeleton directly.
