CSS skeleton loading is a popular technique used to improve the user experience on websites. This technique involves displaying a basic layout of the page before the actual content is loaded.
This helps to reduce the perceived loading time and keeps the user engaged. In this article, we’ll take a look at 10+ CSS skeleton loading examples with source code.
CSS Skeleton Loadings Example
- Simple Skeleton Loading
This example uses a simple skeleton loading animation with a gray background and a white border. The animation is created using CSS animations and transitions.
Source Code:
<div class="skeleton">
<div class="skeleton-box"></div>
</div>
.skeleton {
background-color: #eee;
border: 1px solid #ccc;
height: 100px;
width: 100%;
position: relative;
overflow: hidden;
}
.skeleton-box {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
animation: skeleton-animation 1s infinite linear;
}
@keyframes skeleton-animation {
0% {
left: -100%;
}
100% {
left: 100%;
}
}- Circular Skeleton Loading
This example uses a circular skeleton loading animation with a white background and a gray border. The animation is created using CSS animations and transforms.
Source Code:
<div class="skeleton">
<div class="skeleton-box"></div>
</div>
.skeleton {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.skeleton-box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transform: scale(0);
animation: skeleton-animation 1s infinite linear;
}
@keyframes skeleton-animation {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}- Rectangular Skeleton Loading
This example uses a rectangular skeleton loading animation with a gray background and a white border. The animation is created using CSS animations and transforms.
Source Code:
<div class="skeleton">
<div class="skeleton-box"></div>
</div>
.skeleton {
background-color: #eee;
border: 1px solid #ccc;
height: 100px;
width: 100%;
position: relative;
overflow: hidden;
}
.skeleton-box {
width: 100%;
height: 50%;
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
animation: skeleton-animation 1s infinite linear;
}
@keyframes skeleton-animation {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}- Wave Skeleton Loading
This example uses a wave skeleton loading animation with a gray background and a white border. The animation is created using CSS animations and transforms.
Source Code:
<div class="skeleton">
<div class="skeleton-box"></div>
</div>
.skeleton {
background-color: #eee;
border: 1px solid #ccc;
height: 100px;
width: 100%;
position: relative;
overflow: hidden;
}
.skeleton-box {
width: 100%;CSS skeleton loading is a great technique to improve the user experience on websites by displaying a basic layout of the page before the actual content is loaded. It reduces the perceived loading time and keeps the user engaged.
