Pure CSS loading animations – copy, paste, and customize. No JavaScript required.
<div class="spinner"></div>
<style>
.spinner {
width: 50px; height: 50px;
border: 4px solid #e2e8f0;
border-top: 4px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
</style><div class="pulse-dots">
<span></span><span></span><span></span>
</div>
<style>
.pulse-dots { display: flex; gap: 8px; }
.pulse-dots span {
width: 12px; height: 12px;
background: #3b82f6; border-radius: 50%;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%,80%,100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
</style><div class="skeleton-card">
<div class="skeleton-avatar"></div>
<div class="skeleton-line"></div>
</div>
<style>
.skeleton-avatar, .skeleton-line {
background: #e2e8f0;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; }
}
</style><div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
<style>
.progress-bar-container {
background: #e2e8f0; border-radius: 20px; height: 8px;
}
.progress-bar {
width: 0%; height: 8px;
background: #3b82f6; border-radius: 20px;
animation: progress 2s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; }
}
</style>Get 15+ advanced loaders (skeleton tables, infinite scroll spinners, SVG loaders) in the Pro Pack.
Get Pro Pack – $7 →These free snippets took time to create. A small coffee keeps them coming.
☕ Buy Me a Coffee