Skip to content
Index730 resources
Skeleton

Skeleton

66 resources in the index ship this component, best first. Group: Data Display.

Also called · skeleton loader · shimmer · placeholder loader · ghost loader · content placeholder · loading skeleton

Before you ship

5
  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 it

66