Skeleton Loader

Animated placeholder shapes for better loading states

Quick Start

1. Include Required Files

Include Files • HTML

2. Basic Usage - CSS Only

Text Line Skeleton

Text Line Example • HTML

3. JavaScript API

JavaScript Example • JavaScript

// Create skeleton elements dynamically
var textSkeleton = RSL.Skeleton.text({ width: '75%' });
var cardSkeleton = RSL.Skeleton.card({ lines: 4 });

// Show skeleton in container
RSL.Skeleton.show('#content', function() {
    return RSL.Skeleton.card();
});

// Hide skeleton and restore content
RSL.Skeleton.hide('#content');

Tip: Skeleton loaders provide better UX than spinners by showing the structure of content that's loading.

API Reference

CSS Classes

Base Shapes

Class Description Usage
.rsl-skeleton Base skeleton class with shimmer animation Required on all skeleton elements
.rsl-skeleton-text Single line of text (0.875rem height) For paragraph lines, labels
.rsl-skeleton-title Title/heading (1.5rem height, 60% width) For headings and titles
.rsl-skeleton-paragraph Multiple text lines in container For multi-line content
.rsl-skeleton-circle Circle shape (40px default) For avatars, profile pictures
.rsl-skeleton-rect Rectangle (200px height default) For images, thumbnails, cards
.rsl-skeleton-square Square shape (100px default) For square images, icons
.rsl-skeleton-button Button shape (40px height) For action buttons
.rsl-skeleton-input Input field (40px height) For form fields

Size Modifiers

Class Dimensions Applies To
.rsl-skeleton-circle-sm 32px × 32px Circle
.rsl-skeleton-circle-lg 64px × 64px Circle
.rsl-skeleton-circle-xl 96px × 96px Circle
.rsl-skeleton-rect-sm 120px height Rectangle
.rsl-skeleton-rect-lg 300px height Rectangle
.rsl-skeleton-rect-xl 400px height Rectangle
.rsl-skeleton-button-sm 32px height, 100px width Button
.rsl-skeleton-button-lg 48px height, 140px width Button

Width Modifiers (Text)

Class Width
.rsl-skeleton-text-full 100%
.rsl-skeleton-text-75 75%
.rsl-skeleton-text-50 50%
.rsl-skeleton-text-25 25%

Animation Variants

Class Description
(default) Shimmer animation - horizontal gradient sweep
.rsl-skeleton-pulse Pulse animation - fade in/out effect
.rsl-skeleton-wave Wave animation - sliding effect
.rsl-skeleton-static No animation - static placeholder

Composite Patterns

Class Description
.rsl-skeleton-card Card container with border and padding
.rsl-skeleton-card-header Card header with avatar + text layout
.rsl-skeleton-card-body Card body content area
.rsl-skeleton-list-item List item with avatar + content
.rsl-skeleton-avatar-text Avatar with text content layout
.rsl-skeleton-table-row Table row with grid columns
.rsl-skeleton-form Form with stacked fields

JavaScript API

Shape Generators

Method Parameters Returns
RSL.Skeleton.text(options) { width, animation } Text line element
RSL.Skeleton.title(options) { size, animation } Title element
RSL.Skeleton.paragraph(options) { lines, animation } Paragraph container
RSL.Skeleton.circle(options) { size, animation } Circle element
RSL.Skeleton.rectangle(options) { size, height, animation } Rectangle element
RSL.Skeleton.button(options) { size, animation } Button element
RSL.Skeleton.card(options) { avatar, lines, animation } Card container
RSL.Skeleton.listItem(options) { avatar, animation } List item element

Container Methods

Method Parameters Description
RSL.Skeleton.show(target, generator) Element/selector, function Show skeleton in container, store original content
RSL.Skeleton.hide(target) Element/selector Hide skeleton, restore original content
RSL.Skeleton.replace(target, duration, callback) Element/selector, ms, function Temporarily replace element with matching skeleton

Accessibility: All skeleton loaders automatically respect prefers-reduced-motion and disable animations when requested.

Accessibility

ARIA Support

Accessible Example • HTML

Browser Support

Skeleton loader works in all modern browsers:

Note: Shimmer animation uses CSS gradients and keyframes. Fallback is static gray boxes in older browsers.