Skeleton

Placeholder bars to indicate loading content

<Skeleton>

import { Skeleton } from '@strum/react';
name
type
default
accessibilityLabel
string
Loading
animation
"none" | "glow"
glow
width
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; 0: CSSVarFunction; 1: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
full

Skeletons adapt to the font size of the parent container.

You can apply any atomic width properties to a skeleton. Works nicely with our 12 column widths.

Skeletons also adapt to the text color of the parent container.

Accessibility label
Link to this heading

The skeleton includes an accessibilityLabel to provide meaning for screen readers. The label defaults to Loading, but can be overriden if you want something more specific.

<Stack direction="horizontal">
<Skeleton accessibilityLabel="Generating your report" />
</Stack>