Skeleton

A shimmering placeholder used while content is loading. Matches the shape of the real content to reduce layout shift and signal progress to the user.

Playground

Controls

Shape

Width

Height

Animated

Theme

HTMLReact

ShareCopy

Usage

<!-- Default rect -->
<lt-skeleton></lt-skeleton>
<lt-skeleton height="200px"></lt-skeleton>

<!-- Text line -->

<lt-skeleton shape="text" width="60%"></lt-skeleton>

<!-- Avatar circle -->

<lt-skeleton shape="circle" width="48px" height="48px"></lt-skeleton>

<!-- Disable shimmer -->

<lt-skeleton animated="false"></lt-skeleton>

import { Skeleton } from '@latty-ds/react';

<Skeleton />
<Skeleton height="200px" />
<Skeleton shape="text" width="60%" />
<Skeleton shape="circle" width="48px" height="48px" />

<template>
<lt-skeleton></lt-skeleton>
<lt-skeleton height="200px"></lt-skeleton>
<lt-skeleton shape="text" width="60%"></lt-skeleton>
<lt-skeleton shape="circle" width="48px" height="48px"></lt-skeleton>
</template>

API