An adaptive content skeleton built with pure HTML and CSS that displays placeholder shapes matching real content layout, helping users perceive structure while data is loading without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where progressive content loading improves user experience, such as article pages, cards, lists, dashboards, or layouts that fetch data asynchronously.
Implementation
The skeleton effect is created using CSS gradients, keyframe animations, and layout placeholders, allowing content blocks to animate subtly while maintaining the final layout structure.
HTML
<div class="skeleton-card" aria-hidden="true">
<div class="sk-avatar"></div>
<div class="sk-lines">
<span></span>
<span></span>
<span class="short"></span>
</div>
</div>CSS
.skeleton-card {
width: 200px;
display: flex;
gap: 12px;
}
.sk-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--sk-bg);
}
.sk-lines {
flex: 1;
}
.sk-lines span {
display: block;
height: 8px;
border-radius: 6px;
background: var(--sk-bg);
margin-bottom: 8px;
}
.sk-lines .short {
width: 60%;
}
:root {
--sk-bg: linear-gradient(
100deg,
#1f2933 40%,
#2d3748 50%,
#1f2933 60%
);
}
.skeleton-card * {
animation: shimmer 1.4s infinite linear;
background-size: 200% 100%;
}
@keyframes shimmer {
to { background-position: -200% 0; }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Adapts to different content layouts
- Simulates real content structure during loading
- Lightweight and visually consistent
- Works in modern browsers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.