Skeleton

The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.

Source Code

uikit-react-core

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-1">
  <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-1">
  <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

You can use a background image for the skeleton component by using the backgroundImage prop. This is useful when you want to show a placeholder image while the real image is being loaded.

<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 use custom CSS animations with the skeleton component by defining your own in your 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"
/>

Selection List Slider

Skeleton

Content size

Some text being hidden by the skeleton

Background image

Custom animation

Related components