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.
