Skeleton

<ts-skeleton> vv0.4.0

The ts-skeleton component.

Open in Storybook for interactive demos.

Preview

<ts-skeleton animation="pulse" lines="1" variant="text"></ts-skeleton>

Properties

Property	Attribute	Type	Default	Description
animation	animation	"none" | "pulse" | "wave"	'pulse'	Animation style.
height	height	string | undefined	—	CSS height of the skeleton.
lines	lines	number	1	Number of lines to render (text variant only).
variant	variant	"circular" | "rectangular" | "text"	'text'	The skeleton shape variant.
width	width	string	'100%'	CSS width of the skeleton.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The skeleton element container.
line	Individual skeleton line (text variant).

ts-skeleton::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-skeleton animation="pulse" lines="1" variant="text"></ts-skeleton>

React

import { TsSkeleton } from '@tessera-ui/react';

<TsSkeleton animation="pulse" lines="1"></TsSkeleton>