Skeleton

The Skeleton component displays a placeholder that mimics the shape and size of loading content.

My skeleton example content

variant

animation

hidden

<HvSkeleton 
  variant="text"
  animation="wave"
  hidden={false}
>
  <div>
    My skeleton example content
  </div>
</HvSkeleton>

<HvSkeleton 
  variant="text"
  animation="wave"
  hidden={false}
>
  <div>
    My skeleton example content
  </div>
</HvSkeleton>

Content size

If you pass no width or height props, the skeleton will adapt to the content size.

Some text being hidden by the skeleton

<div className="flex flex-col gap-xs">
  <HvSkeleton variant="circle">
    <HvAvatar alt="Beatrice" src="https://i.imgur.com/bE7vg3N.png" size="md" />
  </HvSkeleton>
  <HvSkeleton variant="text">
    <HvTypography>Some text being hidden by the skeleton</HvTypography>
  </HvSkeleton>
  <HvSkeleton variant="square">
    <HvTypography variant="title3">
      Some text being hidden by the skeleton
    </HvTypography>
  </HvSkeleton>
</div>

<div className="flex flex-col gap-xs">
  <HvSkeleton variant="circle">
    <HvAvatar alt="Beatrice" src="https://i.imgur.com/bE7vg3N.png" size="md" />
  </HvSkeleton>
  <HvSkeleton variant="text">
    <HvTypography>Some text being hidden by the skeleton</HvTypography>
  </HvSkeleton>
  <HvSkeleton variant="square">
    <HvTypography variant="title3">
      Some text being hidden by the skeleton
    </HvTypography>
  </HvSkeleton>
</div>

Background image

Use the backgroundImage prop to show a placeholder image in HvSkeleton—ideal for image loading scenarios.

<HvSkeleton
  width="auto"
  variant="square"
  width={300}
  height={200}
  backgroundImage="https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png"
/>

<HvSkeleton
  width="auto"
  variant="square"
  width={300}
  height={200}
  backgroundImage="https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png"
/>

Custom animation

You can apply custom CSS animations to HvSkeleton by defining them in your own styles.

<HvSkeleton
  width={300}
  height={100}
  variant="square"
  className="!animate-flash !animate-count-infinite"
/>

<HvSkeleton
  width={300}
  height={100}
  variant="square"
  className="!animate-flash !animate-count-infinite"
/>

Simple Grid Slider

Skeleton

Content size

Some text being hidden by the skeleton

Background image

Custom animation

Related components