Skeleton Pre Loader Example - How to create a skeleton loader screen using HTML CSS
As we have seen, many companies: Facebook, Youtube, Linkedin, and Slack, uses the skeleton effect in their apps and websites for better UX (user experience).
But why, As everyone wants their websites to load as quickly as possible and lots of time lot of date need to be rendered or or loads in the page, so Skeleton screens are a great option.
What is a Skeleton Screen?
A skeleton screen is a placeholder used to mimic the structure of a webpage while its content is being fetched.
It informs users that data is currently loading and also provide a visual clue about the type of content being retrieved, such as images, text, or cards, so that user will not irritate to wait.
Why we Use Skeleton Screens?
- Skeleton screens enhance user experience by appearing faster and more comfortable. They Improve estimated performance, which not only contributes to better UX but also helps boost conversion rates.
- Unlike spinners or loaders, skeleton screens provide context by visually representing what is loading. Spinners can create a sense of uncertainty for users as they give no indication of what’s being loaded or how long it will take.
- Skeleton screens shift the user's focus to the progress being made rather than the waiting period. This approach creates the illusion of speed and reduces the perceived load time.
Here are some pre-made skeleton screen example using HTML and CSS
Blog page Skeleton Screen
<div class="skeleton-layout">
<div class="skeleton-header">
<div class="skeleton-logo"></div>
<div class="skeleton-menu"></div>
<div class="skeleton-search"></div>
</div>
<div class="skeleton-body">
<div class="skeleton-sidebar left-sidebar hide-mb"></div>
<div class="skeleton-main">
<div class="skeleton-wrapper">
<!-- Main Skeleton Content -->
<div class="skeleton-image"></div>
<!-- <div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text short"></div> -->
</div>
<div class="skeleton-card">
<div class="skeleton-title"></div>
<div class="skeleton-description"></div>
<div class="skeleton-description short"></div>
<div class="skeleton-footer">
<div class="skeleton-button"></div>
<div class="skeleton-icons">
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
</div>
</div>
</div>
<div class="skeleton-card">
<div class="skeleton-title"></div>
<div class="skeleton-description"></div>
<div class="skeleton-description short"></div>
<div class="skeleton-footer">
<div class="skeleton-button"></div>
<div class="skeleton-icons">
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
</div>
</div>
</div>
<div class="skeleton-card">
<div class="skeleton-title"></div>
<div class="skeleton-description"></div>
<div class="skeleton-description short"></div>
<div class="skeleton-footer">
<div class="skeleton-button"></div>
<div class="skeleton-icons">
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
<div class="skeleton-icon"></div>
</div>
</div>
</div>
</div>
<div class="skeleton-sidebar right-sidebar hide-mb"></div>
</div>
</div>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Layout */
.skeleton-layout {
display: flex;
flex-direction: column;
}
.skeleton-header {
width: 100%;
height: 60px;
/* margin-bottom: 10px; */
background: #fff !important;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12);
/* animation: shimmer 1.5s infinite linear; */
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 0 30px;
margin-bottom: 15px;
}
.skeleton-logo {
width: 120px;
height: 40px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-search {
width: 300px;
height: 40px;
background: #e0e0e0;
border-radius: 20px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-menu {
/* margin-top: 10px; */
width: 100%;
max-width: 920px;
height: 40px;
/* background:rgba(255, 255, 255, 0.5) !important; */
border-radius: 20px;
animation: shimmer 1.5s infinite linear;
}
/* Body Section */
.skeleton-body {
display: flex;
gap: 10px;
}
.skeleton-sidebar {
width: 320px;
height: calc(100vh - 60px);
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-main {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
/* Main Skeleton Content */
.skeleton-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 1024px;
width: 100%;
margin-bottom: 20px;
}
.skeleton-image {
width: 100%;
height: 180px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-text {
width: 100%;
height: 20px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-text.short {
width: 60%;
}
/* Card Skeleton */
.skeleton-card {
width: 100%;
max-width: 1024px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12);
padding: 10px;
border-radius: 10px;
}
.skeleton-title {
width: 60%;
height: 24px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-description {
width: 100%;
height: 12px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-description.short {
width: 80%;
}
/* Footer Section */
.skeleton-footer {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}
.skeleton-button {
width: 150px;
height: 40px;
background: #e0e0e0;
border-radius: 20px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-icons {
display: flex;
gap: 10px;
}
.skeleton-icon {
width: 30px;
height: 30px;
background: #e0e0e0;
border-radius: 50%;
animation: shimmer 1.5s infinite linear;
}
/* Shimmer Animation */
@keyframes shimmer {
0% {
background-position: 100%;
}
100% {
background-position: -100%;
}
}
.skeleton-header,
.skeleton-image,
.skeleton-text,
.skeleton-sidebar,
.skeleton-title,
.skeleton-description,
.skeleton-button,
.skeleton-icon,
.skeleton-logo,
.skeleton-search,
.skeleton-menu {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f5f5f5 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
}
@media (max-width: 768px) {
.hide-mb {
display: none;
}
}
Preview:
Ecommerce Page Skeleton Screen
<div class="skeleton-ecommerce">
<!-- Header -->
<div class="skeleton-header">
<div class="skeleton-logo"></div>
<div class="skeleton-search"></div>
<div class="skeleton-cart"></div>
</div>
<!-- Sidebar and Main Content -->
<div class="skeleton-body">
<!-- Sidebar (Filters) -->
<div class="skeleton-sidebar hide-mb">
<div class="skeleton-filter-box">
<div class="skeleton-filter-title"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
</div>
<div class="skeleton-filter-box">
<div class="skeleton-filter-title"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
</div>
<div class="skeleton-filter-box">
<div class="skeleton-filter-title"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
<div class="skeleton-filter-item"></div>
</div>
</div>
<!-- Main Content (Product Grid) -->
<div class="skeleton-main-wraper">
<div class="skeleton-products-row">
<div class="skeleton-title"></div>
<div class="skeleton-products">
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
</div>
</div>
<div class="skeleton-products-row">
<div class="skeleton-title"></div>
<div class="skeleton-products">
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
<div class="skeleton-product-card">
<div class="skeleton-product-image"></div>
<div class="skeleton-product-title"></div>
<div class="skeleton-product-price"></div>
<div class="skeleton-product-button"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="skeleton-footer">
<div class="skeleton-footer-column"></div>
<div class="skeleton-footer-column"></div>
<div class="skeleton-footer-column"></div>
</div>
</div>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* General Skeleton Layout */
.skeleton-ecommerce {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Header */
.skeleton-header {
width: 100%;
height: 60px;
/* margin-bottom: 10px; */
background: #fff !important;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12);
/* animation: shimmer 1.5s infinite linear; */
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 0 30px;
}
.skeleton-logo {
width: 120px;
height: 40px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-search {
width: 300px;
height: 40px;
background: #e0e0e0;
border-radius: 20px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-cart {
width: 40px;
height: 40px;
background: #e0e0e0;
border-radius: 50%;
animation: shimmer 1.5s infinite linear;
}
/* Body */
.skeleton-body {
display: flex;
gap: 20px;
padding: 20px;
}
.skeleton-main-wraper{
width: 100%;
display: flex;
flex-direction: column;
}
/* Sidebar */
.skeleton-sidebar {
width: 420px;
display: flex;
flex-direction: column;
gap: 10px;
}
.skeleton-filter-box {
display: flex;
width: 100%;
flex-direction: column;
gap: 10px;
margin-bottom: 30px;
}
.skeleton-filter-title {
width: 60%;
height: 20px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-filter-item {
width: 80%;
height: 15px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
/* Products */
.skeleton-products-row {
width: 100%;
gap: 10px;
display: flex;
flex-direction: column;
margin-bottom: 40px;
}
.skeleton-products {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
gap: 20px;
}
.skeleton-product-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.skeleton-product-image {
width: 100%;
height: 200px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-product-title {
width: 70%;
height: 20px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-product-price {
width: 50%;
height: 20px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-product-button {
width: 80%;
height: 30px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
/* Footer */
.skeleton-footer {
display: flex;
justify-content: space-between;
padding: 20px;
background: #e0e0e0;
}
.skeleton-footer-column {
width: 30%;
height: 100px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-title {
width: 40%;
height: 24px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
/* Shimmer Effect */
@keyframes shimmer {
0% {
background-position: 100%;
}
100% {
background-position: -100%;
}
}
.skeleton-logo,
.skeleton-search,
.skeleton-cart,
.skeleton-filter-title,
.skeleton-filter-item,
.skeleton-product-image,
.skeleton-product-title,
.skeleton-product-price,
.skeleton-product-button,
.skeleton-footer-column,
.skeleton-title {
background: linear-gradient(90deg,
#e0e0e0 25%,
#f5f5f5 50%,
#e0e0e0 75%);
background-size: 200% 100%;
}
@media (max-width: 768px) {
.hide-mb {
display: none;
}
}
Preview:
Carousel Slider Skeleton Screen
<div class="carousel-container">
<!-- Left Arrow -->
<!-- Product Carousel -->
<div class="product-carousel">
<div class="carousel-arrow left"></div>
<!-- Right Arrow -->
<div class="carousel-arrow right"></div>
<div class="product-card">
<div class="skeleton-image"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text short"></div>
<div class="skeleton-button"></div>
</div>
<div class="product-card">
<div class="skeleton-image"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text short"></div>
<div class="skeleton-button"></div>
</div>
<div class="product-card hide-mb">
<div class="skeleton-image"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text short"></div>
<div class="skeleton-button"></div>
</div>
<div class="product-card hide-mb">
<div class="skeleton-image"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text short"></div>
<div class="skeleton-button"></div>
</div>
</div>
<div class="carousel-dots">
<div class="carousel-dot"></div>
<div class="carousel-dot"></div>
<div class="carousel-dot"></div>
</div>
</div>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Container styles */
.carousel-container {
width: 100%;
overflow: hidden;
padding: 20px;
display: flex;
background-color: #f9f9f9;
justify-content: center;
align-items: center;
flex-direction: column;
}
.product-carousel {
display: flex;
width: 100%;
max-width: 960px;
gap: 15px;
scroll-behavior: smooth;
padding: 20px;
/* justify-content: center; */
align-items: center;
/* width: auto; */
position: relative;
display: inline-flex;
}
.product-card {
width: 24%;
height: 300px;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 8px;
background-color: #fff;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.skeleton-image {
width: 100%;
height: 150px;
background: #e0e0e0;
border-radius: 8px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-text {
width: 100%;
height: 15px;
background: #e0e0e0;
border-radius: 4px;
animation: shimmer 1.5s infinite linear;
}
.skeleton-text.short {
width: 60%;
animation: shimmer 1.5s infinite linear;
}
/* Arrow styles */
.carousel-arrow {
width: 40px;
height: 40px;
background: #e0e0e0;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: shimmer 1.5s infinite linear;
cursor: pointer;
z-index: 10;
}
.carousel-arrow.left {
left: -5px;
}
.carousel-arrow.right {
right: -5px;
}
/* Dots styles */
.carousel-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.carousel-dot {
width: 10px;
height: 10px;
background: #e0e0e0;
border-radius: 50%;
animation: shimmer 1.5s infinite linear;
}
/* Shimmer animation */
@keyframes shimmer {
0% {
background-position: 100%;
}
100% {
background-position: -100%;
}
}
.skeleton-button {
width: 70%;
height: 40px;
background: #e0e0e0;
border-radius: 20px;
animation: shimmer 1.5s infinite linear;
}
/* Scrollbar styling */
.product-carousel::-webkit-scrollbar {
height: 8px;
}
.product-carousel::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
.product-carousel::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
.skeleton-image,
.skeleton-text,
.skeleton-button,
.carousel-arrow,
.carousel-dot {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f5f5f5 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
}
@media (max-width: 768px) {
.product-card {
width: 48%;
}
.hide-mb {
display: none;
}
}