Skeleton
#

Skeleton is a component that is used to show the user that the content is loading. It is used to improve the user experience and to show the user that the content is loading.

Examples
#

Default
#

The default skeleton is a squared reactable with a width of 100% and a height of 5rem.

Open in GitHub

Text
#

The skeleton with text variant looks like a text line. Count of lines can be configured with lines prop. The last line can be shorter than others with lastLineWidth prop.

Open in GitHub

Headline
#

You can apply typography or any other classes to the skeleton. For example, va-h1 class will make the skeleton look like a headline.

Open in GitHub

Circle
#

The skeleton with circle variant looks like a circle. The size of the circle can be configured with height and width prop. Usualy used as avatar placeholder.

Open in GitHub

Rounded
#

The skeleton with rounded variant looks like a rounded rectangle. The size of the rectangle can be configured with height and width prop. Can be used as button or input placeholder.

Open in GitHub

Square
#

The skeleton with square variant looks like a square. The size of the square can be configured with height and width prop. Can be used as card or image placeholder.

Open in GitHub

Group
#

Skeletons can be grouped in VaSekeletonGroup component to sync their animations. For example, you can use it to create a card, list or table placeholder.

Open in GitHub

Wave animation
#

You can use wave animation for VaSkeletonGroup to make it look like a wave. VaSkeletonGroup will sync animations.

Open in GitHub

Loading
#

Down bellow is an example how you can use skeleton in your application. We use isLoading ref to indicate if content is loading. Don't forget to add aria-busy attribute to the content to indicate that it is loading to sreen reader.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
animation

String

"pulse"

ariaLabel

String

"$t:loading"

color

String

"backgroundElement"

delay

Number

100

height

String

"5em"

lastLineWidth

String

"75%"

lineGap

String

"8px"

lines

Number

1

tag

String

"div"

variant

String

"squared"

width

String

"100%"

Css Variables #

NameDefault Value
--va-skeleton-wave-color rgb(100, 100, 100)
--va-skeleton-wave-opacity 0.2
--va-skeleton-border-radius unset
--va-skeleton-animation-duration 2.5s