Skip to content
Tattva

Skeleton

Stable

A shimmering gray block that holds the place of content while it loads.

Also known as placeholder, shimmer, loading placeholder, ghost element

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Text lines

Make the lines different lengths so it looks like a paragraph.

UsageCodeDesignAccessibility

When to use it

A gray block with a soft moving shine that holds the space of content still loading. Several together sketch the shape of what is coming, so the page does not jump when it arrives.

Use it for

  • Lines of text that are loading: vary the widths.
  • A list row with a picture and text, before the data arrives.
  • Cards or images whose size you already know.

Not for

Do and avoid

Do. Grey lines in the shape of the list show what is coming.
Avoid. Blocks and a spinner on one area send two mixed signals.

Do

  • Match the size and position of the real content, so the page does not jump.
  • Vary line lengths so it looks like real text.
  • Use a round block for pictures of people and gently rounded blocks for text and images.
  • Replace the whole group with real content at once.
  • Set a width and height on each block. Without them it has no size and shows nothing.

Avoid

  • Do not leave blocks on screen after something fails. Show an error message instead.
  • Do not use it inside a button. Use Spinner.
  • Do not put text inside a Skeleton. Screen readers cannot see it.
  • Do not use a Skeleton and a Spinner for the same area.

On a phone

  • Skeleton has no size of its own. It fills the width and height you give it, so use classes that fit a narrow screen.
  • The shimmer runs on a phone unless the person has asked for less motion.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started