Skeleton

Components

A skeleton is a placeholder that mimics the structure of content while it loads. It provides visual feedback that content is coming and reduces perceived wait time.

Checklist

Documentation

Checklist

Documentation

Checklist

Documentation

Checklist

0 out of

0 out of

5

5

Reset

Match content structure

Skeletons should mirror the size and layout of the content that will replace it, to reduce jumpiness on load.

Animation

Subtle motion to indicate loading without being too distracting. Can be a shimmer, pulse, or wave motion in the objects

Style

Flat shapes with no depth, can be rounded or sharp

Color scheme

Typically a neutral gray or very soft colour that does not call too much attention and contrasts just enough with its background.

Transition to real content

Should be a smooth, subtle movement like a fade out before the content loads.

BETA

Less debating, more deciding.

Quorum is a design voting platform that gives you immediate, quantified feedback to iterate with confidence.