Skeleton

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

@volvo-cars/css v2.5.1

Text placeholder

Show codeHide code

<div class="flex flex-col gap-8">
  <div class="skeleton h-24 w-1/2"></div>
  <div class="skeleton h-16 w-full"></div>
  <div class="skeleton h-16 w-full"></div>
  <div class="skeleton h-16 w-64"></div>
</div>

Card placeholder

Show codeHide code

<div class="flex gap-16">
  <div class="skeleton h-64 w-64"></div>
  <div class="flex flex-col gap-8 flex-grow">
    <div class="skeleton h-24 w-1/2"></div>
    <div class="skeleton h-16 w-full"></div>
    <div class="skeleton h-16 w-full"></div>
  </div>
</div>