Loading Placeholder

A single loading placeholder element used in a loading skeleton to visually communicate that piece of content.

Also known as:
SkeletonStencilPlaceholder UI

AnchorNeed to know

  • Only use loading placeholders with loading skeletons.


UI Kit

To keep in mind

  • Indicate the shape of content to arrive in a loading skeleton.
  • Loading placeholders follow the shape and form of what will be loaded – the width, height, colors and text line-heights align to the built components.
  • Assuming the content will instantly load without a page reload, animate the loading placeholder’s opacity.
  • If the skeleton loading will load in content when it’s ready without refreshing the page, animate the loading placeholders. We don’t currently use gradients in our branding aesthetic, so for ‘shimmering’ skeletons we opt for opacity changes rather than animated gradients.

When to use and when not to use

When to use
When not to use
  • Only use loading placeholders with loading skeletons.

External links