Skeleton Examples

Realistic loading state demonstrations

Text Skeletons

Loading states for text content of various lengths

Single Lines - Different Widths
Title + Paragraph
Text Skeleton Code • HTML

User Profile Loading

Avatar with user information skeleton

Skeleton State
Loaded State
User Profile Skeleton • HTML

Content Card Loading

Image cards with text content

Skeleton State
Loaded State

Introducing New Features

We're excited to announce the latest updates to our platform, including enhanced performance and new customization options.

Read More
Card Skeleton • HTML

Comment List Loading

List of comments with avatars

Skeleton State
Loaded State
Sarah Johnson
This is exactly what I was looking for! The documentation is clear and the examples are really helpful.
Mike Chen
Great work on this component. It integrates seamlessly with our existing design system.
Alex Rivera
Love the accessibility features. Screen reader support is excellent!
List Skeleton • HTML

Data Table Loading

Skeleton for tabular data

Skeleton State
Loaded State
Name Status Date
Project Alpha Active 2024-01-15
Project Beta Completed 2024-01-10
Project Gamma Pending 2024-01-20
Table Skeleton • HTML

Animation Variants

Different animation styles for skeleton loaders

Shimmer (Default)
Pulse
Wave
Static
Animation Variants • HTML

Dynamic Loading with JavaScript

Show and hide skeleton loaders programmatically

Click "Load Content" to see skeleton loading

JavaScript API • JavaScript

// Show skeleton
RSL.Skeleton.show('#dynamic-content', function() {
    return RSL.Skeleton.card({ lines: 4 });
});

// Simulate loading (2 seconds)
setTimeout(function() {
    // Hide skeleton and show real content
    RSL.Skeleton.hide('#dynamic-content');
    document.querySelector('#dynamic-content').innerHTML =
        '
Content Loaded!
This is the actual content that was loaded.
';
}, 2000);