Skip to content
IndexDesign corpus

Skeleton

69 resources ship this component · Data Display

Also called: skeleton loader, shimmer, placeholder loader, ghost loader, content placeholder, loading skeleton.

Before you ship5 checks
  1. 01Match content structure — Skeletons should mirror the size and layout of the content that will replace it, to reduce jumpiness on load
  2. 02Animation — Subtle motion to indicate loading without being too distracting. Can be a shimmer, pulse, or wave motion in the objects
  3. 03Style — Flat shapes with no depth, can be rounded or sharp
  4. 04Color scheme — Typically a neutral gray or very soft colour that does not call too much attention and contrasts just enough with its background
  5. 05Transition to real content — Should be a smooth, subtle movement like a fade out before the content loads

Checks from checklist.design, MIT.

Ships it69