The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Skeleton

Placeholder bars to indicate loading content
<Skeleton />

Props
Link to this heading

<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; auto: CSSVarFunction; 0: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
full

Sizes
Link to this heading

Skeletons adapt to the font size of the parent container.

<Stack>

  <Text size="extraSmall">

    <Skeleton animation="none" />

  </Text>

  <Text size="small">

    <Skeleton animation="none" />

  </Text>

  <Text size="base">

    <Skeleton animation="none" />

  </Text>

  <Text size="large">

    <Skeleton animation="none" />

  </Text>

  <Text size="extraLarge">

    <Skeleton animation="none" />

  </Text>

  <Heading>

    <Skeleton animation="none" />

  </Heading>

</Stack>

Widths
Link to this heading

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

<Stack>

  <Skeleton width="4/12" />

  <Stack direction="horizontal" wrap={false}>

    <Skeleton width="6/12" />

    <Skeleton width="3/12" />

  </Stack>

  <Stack direction="horizontal" wrap={false}>

    <Skeleton width="3/12" />

    <Skeleton width="6/12" />

  </Stack>

</Stack>

Colors
Link to this heading

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

<Stack>

  <Text color="neutral11">

    <Skeleton animation="none" />

  </Text>

  <Text color="neutral10">

    <Skeleton animation="none" />

  </Text>

  <Text color="accent11">

    <Skeleton animation="none" />

  </Text>

  <Text color="error11">

    <Skeleton animation="none" />

  </Text>

  <Text color="warning11">

    <Skeleton animation="none" />

  </Text>

  <Text color="success11">

    <Skeleton animation="none" />

  </Text>

</Stack>

Animations
Link to this heading

<Stack>

  <div>

    <Text>None</Text>

    <Skeleton animation="none" />

  </div>

  <div>

    <Text>Glow (default)</Text>

    <Skeleton animation="glow" />

  </div>

</Stack>

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>
Edit on GitHub