Skip to content
VolvoVolvo Cars Web Design System

Skeleton

Edit on GitHub

A placeholder element that shows a loading state with an animated shimmer effect.

@volvo-cars/css v2.5.1

When component data isn’t immediately available, you can use skeletons to improve the perceived responsiveness of the interface.

When to use skeletons

Section titled “When to use skeletons”
  • If the page has a consistent layout pattern (e.g. tables, grids, lists,…)
  • To indicate loading state on late-loaded content (e.g. images, text, …), for example when fetching data from an API

When not to use skeletons

Section titled “When not to use skeletons”
  • If loading time is minimal (e.g. less than 1 second)
  • If the components will be conditionally rendered (e.g. a feature flagged component that may not be shown)

Replace text with skeleton in Figma

Section titled “Replace text with skeleton in Figma”

When using skeleton to replace text, match the skeleton height to the text size it replaces, and make sure the skeleton recreates the expected shape of the component it replaces.