skeleton

Loading placeholder that mimics the shape of incoming content.

A simple animated placeholder block for use during async data loading. Apply width, height and border-radius via style or class to match the content it represents.

Installation

pnpm add @fluixi/skeleton

Usage

import { Skeleton } from '@fluixi/skeleton';

<Skeleton style="width: 200px; height: 1rem; border-radius: 4px;" />
<Skeleton style="width: 40px; height: 40px; border-radius: 50%;" />

All props are forwarded to the underlying <div data-skeleton>.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.