Skeleton

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

Preview

Usage

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

HTML

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

Examples

Avatar

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

Card

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

Text

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

Form

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

Table

Repeat placeholder rows when tabular data is still being fetched.

RTL

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

Custom Styling

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

Token Inspector

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

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, #f4f4f5) 84%, var(--frame-foreground, #09090b) 8%);
--frame-skeleton-highlight: color-mix(in srgb, var(--frame-background, #fff) 64%, transparent);
--frame-skeleton-radius: var(--frame-radius-md, 0.5rem);
--frame-skeleton-width: 100%;
--frame-skeleton-height: 1rem;
--frame-skeleton-animation-duration: 1.4s;