Skeleton Loading Screen Animation using only HTML & CSS
Skeleton screens are modern placeholders that mimic the layout of the page that is loading, enhancing the perceived performance of your website or application. This article covers what a skeleton UI is, its benefits, where to use it, and how to implement.
What is Skeleton UI?
Skeleton UI is a type of loading placeholder that shows a simplified version of the layout that is yet to be loaded. Instead of spinning loaders or empty spaces, users see grey boxes or shimmer effects that simulate the shape and size of actual content.
Advantages of Using Skeleton UI
- Improves Perceived Performance: Gives users something to look at instantly, reducing perceived wait time.
- Better User Experience: Users can visualize the structure of content even before it's loaded.
- Mobile-Friendly: Works great on slower networks.
- Content Awareness: Hints at what's coming (e.g., image, title, etc.).
- Reduces Layout Shift: Keeps layout stable as real content loads.
Where Can Skeleton UI Be Used?
- News apps (article previews)
- E-commerce platforms (product cards)
- Social feeds
- Dashboards with charts
- User profiles or detail pages
- Tables and lists
Skeleton UI Implementation Using Bootstrap 5
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Skeleton UI with Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="bg-light p-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card p-3 shadow-sm">
<div class="skeleton skeleton-img w-100 mb-3"></div>
<div class="skeleton skeleton-title"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text w-75"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS (styles.css)
.skeleton {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 5px;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-img {
height: 180px;
}
.skeleton-title {
height: 24px;
width: 60%;
margin: 10px 0;
}
.skeleton-text {
height: 14px;
width: 90%;
margin-bottom: 6px;
}
JavaScript (optional)
setTimeout(() => {
document.querySelectorAll('.skeleton').forEach(el => {
el.classList.remove('skeleton');
el.style.background = '#fff'; // Replace with real content
});
}, 3000);
Demo
Please click the button below to view the demo.
Conclusion
Skeleton UIs are a clean, elegant way to improve UX and make apps feel faster. Using just HTML + CSS + Bootstrap, you can create lightweight loading placeholders with no extra dependencies.
