Spin Ring Loader
<div class="loader-spin"></div>
Gradient Ring Loader
<div class="loader-gradient"></div>
Bouncing Dots Loader
<div class="loader-dots">
<span></span>
<span></span>
<span></span>
</div>
Pulse Loader
<div class="loader-pulse"></div>
Progress Bar Loader
<div class="loader-bar-wrap">
<div class="loader-bar"></div>
</div>
Skeleton Loader
<div class="skeleton-card">
...
</div>
Audio Bars Loader
<div class="loader-bars">
<span></span>
</div>
Orbit Loader
<div class="orbit-loader"><span></span></div>
Wave Loader
<div class="wave-loader">
<span></span><span></span><span></span><span></span><span></span>
</div>
Infinity Loader
<div class="infinity-loader">
<div></div><div></div>
</div>
Neon Glow Loader
<div class="neon-loader"></div>
Ripple Loader
<div class="ripple-loader">
<div></div><div></div>
</div>
Morphing Blob
<div class="blob-loader"></div>
/* CSS */
.blob-loader {
width: 60px; height: 60px;
background: linear-gradient(135deg, #7c5cff, #fd79a8);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: blob-morph 2.5s ease-in-out infinite;
}
@keyframes blob-morph {
0%,100% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; }
25% { border-radius: 58% 42% 38% 62%/50% 65% 35% 50%; }
50% { border-radius: 50% 50% 20% 80%/25% 80% 20% 75%; }
75% { border-radius: 67% 33% 60% 40%/40% 47% 53% 60%; }
}
Clock Spinner
<div class="clock-loader">
<div class="clock-hand hour"></div>
<div class="clock-hand minute"></div>
</div>
/* CSS */
.clock-loader {
width: 60px; height: 60px;
border: 3px solid rgba(124,92,255,0.3);
border-radius: 50%; position: relative;
}
.clock-loader::before {
content:''; position:absolute;
top:50%; left:50%;
width:5px; height:5px;
background:#7c5cff; border-radius:50%;
transform:translate(-50%,-50%);
}
.clock-hand {
position:absolute; bottom:50%; left:50%;
transform-origin: bottom center;
border-radius:2px; background:#7c5cff;
}
.hour { width:3px; height:18px; margin-left:-1.5px; animation: clock-h 6s linear infinite; }
.minute { width:2px; height:24px; margin-left:-1px; animation: clock-m 1.5s linear infinite; }
@keyframes clock-h { to { transform: rotate(360deg); } }
@keyframes clock-m { to { transform: rotate(360deg); } }
Heartbeat Loader
<div class="heartbeat-loader">
<svg viewBox="0 0 100 30" class="heartbeat-svg">
<polyline class="heartbeat-line"
points="0,15 20,15 28,3 36,27 44,15 52,15 60,8 68,22 76,15 100,15"/>
</svg>
</div>
/* CSS */
.heartbeat-loader { width: 160px; height: 50px; }
.heartbeat-svg { width: 100%; height: 100%; }
.heartbeat-line {
fill: none; stroke: #fd79a8; stroke-width: 2;
stroke-dasharray: 200; stroke-dashoffset: 200;
animation: hb-draw 1.2s ease-in-out infinite;
}
@keyframes hb-draw {
0% { stroke-dashoffset: 200; opacity: 1; }
70% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
Typewriter Dots
<div class="typewriter-loader">
<span></span><span></span><span></span>
</div>
/* CSS */
.typewriter-loader {
display: flex; gap: 6px; align-items: center;
}
.typewriter-loader span {
width: 10px; height: 10px;
border-radius: 50%;
background: #6c5ce7;
animation: type-bounce 1s infinite ease-in-out;
}
.typewriter-loader span:nth-child(2) { animation-delay: 0.2s; background: #a29bfe; }
.typewriter-loader span:nth-child(3) { animation-delay: 0.4s; background: #fd79a8; }
@keyframes type-bounce {
0%,80%,100% { transform: scale(0.6); opacity:0.4; }
40% { transform: scale(1.2); opacity:1; }
}
Comet Trail
<div class="comet-loader"></div>
/* CSS */
.comet-loader {
width: 70px; height: 70px;
border-radius: 50%;
border: 3px solid rgba(124,92,255,0.12);
position: relative;
animation: spin 1.2s linear infinite;
}
.comet-loader::before {
content: ''; position: absolute;
top: -4px; left: 50%;
width: 10px; height: 10px;
background: #7c5cff;
border-radius: 50%;
box-shadow: 0 0 8px 2px #7c5cff,
0 0 20px 6px rgba(124,92,255,0.4);
transform: translateX(-50%);
}
.comet-loader::after {
content: ''; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50%;
background: conic-gradient(
from 0deg, transparent 70%, rgba(124,92,255,0.5) 100%
);
border-radius: 50%;
}
Spinning Gear Loader
<div class="icon-spin-loader">
<i class="fa-solid fa-gear"></i>
<i class="fa-solid fa-gear"></i>
</div>
Icon Pulse Ring
<div class="icon-pulse-ring">
<i class="fa-solid fa-bolt"></i>
<span></span>
<span></span>
</div>
Circular Text Orbit
<div class="text-orbit-loader">
<svg viewBox="0 0 100 100" width="110" height="110">
<path id="orbit-path"
d="M 50,50 m -32,0 a 32,32 0 1,1 64,0 a 32,32 0 1,1 -64,0"
fill="none"/>
<text font-size="10.5" fill="#7c5cff"
font-family="DM Sans, sans-serif"
font-weight="700" letter-spacing="3">
<textPath href="#orbit-path">LOADING • PLEASE WAIT •</textPath>
</text>
</svg>
<i class="fa-solid fa-circle-notch text-orbit-icon"></i>
</div>
Stacked Squares
<div class="stacked-squares">
<span></span>
<span></span>
<span></span>
</div>
Hexagon Loader
<div class="hex-loader"></div>
DNA Helix Loader
<div class="dna-loader">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
Glass Spinner
<div class="glass-loader"></div>
AI Thinking Loader
<div class="ai-loader">
<span></span><span></span><span></span>
</div>
3D Cube Loader
<div class="cube-loader"></div>
Gradient Ring Cascade
<div class="cascade-loader">
<span></span><span></span><span></span>
</div>
Bouncing Squares
<div class="bouncing-squares">
<span></span><span></span><span></span>
</div>
Circular Dash Loader
<div class="circular-dash">
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20"></circle>
</svg>
</div>