Skeleton

Composable loading placeholders with sizing inputs, shimmer animation, token styling, and RTL-friendly layouts.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { FrSkeletonModule } from '@frame-ui-ng/components/skeleton';

HTML

<div frSkeleton width="12rem" height="1rem"></div>

03 Examples

Avatar

Pair a circular placeholder with shorter text rows while a user summary is loading.

Component Sheet

Grid: 8px · Scale: 1:1

Card

Stack large and small placeholders to preserve the footprint of a dashboard card.

Component Sheet

Grid: 8px · Scale: 1:1

Text

Use varied line widths so paragraphs feel closer to the content that will replace them.

Component Sheet

Grid: 8px · Scale: 1:1

Form

Skeletons can sit inside field layouts to keep labels and form spacing stable during loading.

Component Sheet

Grid: 8px · Scale: 1:1

Table

Repeat placeholder rows when tabular data is still being fetched.

Component Sheet

Grid: 8px · Scale: 1:1

RTL

Skeletons use logical sizing, so loading layouts compose naturally inside right-to-left regions.

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

Override skeleton tokens on a loading region or on an individual placeholder to tune color, radius, dimensions, and shimmer timing.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Hover the skeleton surface or individual placeholders to inspect the tokens that control shape, color, size, and motion.

06 Design Tokens

Use these CSS custom properties to tune skeleton color, highlight, radius, default size, and animation speed.

SCSS

--frame-skeleton-bg: color-mix(in srgb, var(--frame-muted) 84%, var(--frame-foreground) 8%);
--frame-skeleton-highlight: color-mix(in srgb, var(--frame-background) 64%, transparent);
--frame-skeleton-radius: var(--frame-radius-md);
--frame-skeleton-width: 100%;
--frame-skeleton-height: 1rem;
--frame-skeleton-animation-duration: 1.4s;