Skeleton Loading CSS Generator
Generate CSS skeleton loading animations with live preview.
25.6Kuses
9.4/10(219)
8px
1.5s
CSS Code
.skeleton {
background: #1e1e2e;
background-image: linear-gradient(90deg, #1e1e2e 0%, #2a2a4e 50%, #1e1e2e 100%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
.skeleton-text {
height: 14px;
margin-bottom: 8px;
}
.skeleton-title {
height: 20px;
width: 60%;
margin-bottom: 12px;
}
.skeleton-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.skeleton-image {
width: 100%;
height: 200px;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}Recommended Products
Ad📖Web Design BooksShop →🎨Color Reference GuidesShop →✏️Drawing TabletsShop →🎨Design SoftwareShop →🖥️Monitor CalibratorsShop →💻Laptop StandsShop →🖱️Wireless MouseShop →🔌USB-C HubShop →👓Blue Light GlassesShop →🖥️Desk PadShop →
Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.
Disclaimer: This tool is provided as-is for informational and educational purposes only.