Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Skeleton

Display a skeleton style loading state as popularized by Facebook, Google, etc.

Basic usage

A Skeleton component is typically used in place of an existing component, and does its best to replicate that component in height and width. The example below demonstrates how we can create a mock ListItem using multiple skeletons in place of text and an avatar.

/** @jsx jsx */

function Example() {
  return (
    <List>
      <ListItem
        interactive={false}
        aria-live="polite"
        aria-busy="true"
        primary={<Skeleton css={{ width: "100px" }} />}
        secondary={<Skeleton />}
        contentBefore={
          <Skeleton
            css={{ width: "3.27rem", height: "3.27rem", borderRadius: "50%" }}
          />
        }
      />
    </List>
  );
}

Animated

You can turn on animations using the animated prop.

<Text>
  <Skeleton animated />
</Text>

API

Skeleton
baseColorstring
highlightColorstring
durationnumber
animatedboolean