Appearance

Skeleton ​

Skeleton loaders are a simplified preview of some content that is loading.

Basic Usage ​

template
<Skeleton />

Playground ​

Variants ​

The Skeleton component comes in three variants: text, rectangular and circular.

Text ​

This is the default variant and requires text to be nested within it. The skeleton automatically adjusts its size to take up the same amount of space as the text within it.

Skeleton is the same length as this text
template
<Skeleton v-if="isLoading">
  <span>Skeleton is the same length as this text</span>
</Skeleton>

<span v-else>Skeleton is the same length as this text</span>
Now a bigger one
template
<Skeleton v-if="isLoading">
  <span class="tw-text-4xl">Now a bigger one</span>
</Skeleton>

<span v-else class="tw-text-4xl">Now a bigger one</span>

Rectangular ​

This variant allows you to set a specific width and height to display a rectangular skeleton. The width property is optional and defaults to its container's width, but the height property is required because its default is 0.

template
<Skeleton variant="rectangular" height="150" width="150" />

Circular ​

Displays a Skeleton in a circular shape. Both the width and height properties are required.

template
<Skeleton variant="circular" height="50" width="50" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.