<!-- CSS Loading Spinners Collection -->
<!-- Pure CSS, no JavaScript required -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Loading Spinners</title>
<style>
body {
display: flex;
flex-wrap: wrap;
gap: 3rem;
padding: 2rem;
background: #1a1a2e;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.spinner-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.spinner-label {
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
}
/* Spinner 1: Classic Circle */
.spinner-1 {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Spinner 2: Dual Ring */
.spinner-2 {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-top-color: #e74c3c;
border-bottom-color: #e74c3c;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* Spinner 3: Dots */
.spinner-3 {
display: flex;
gap: 8px;
}
.spinner-3 div {
width: 12px;
height: 12px;
background: #2ecc71;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.spinner-3 div:nth-child(1) { animation-delay: -0.32s; }
.spinner-3 div:nth-child(2) { animation-delay: -0.16s; }
/* Spinner 4: Pulse */
.spinner-4 {
width: 50px;
height: 50px;
background: #9b59b6;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
/* Spinner 5: Bars */
.spinner-5 {
display: flex;
gap: 6px;
align-items: center;
height: 50px;
}
.spinner-5 div {
width: 8px;
height: 100%;
background: #f39c12;
animation: bars 1.2s ease-in-out infinite;
}
.spinner-5 div:nth-child(1) { animation-delay: -0.4s; }
.spinner-5 div:nth-child(2) { animation-delay: -0.3s; }
.spinner-5 div:nth-child(3) { animation-delay: -0.2s; }
.spinner-5 div:nth-child(4) { animation-delay: -0.1s; }
/* Spinner 6: Square */
.spinner-6 {
width: 50px;
height: 50px;
background: #1abc9c;
animation: square-spin 2s infinite ease;
}
/* Spinner 7: Circle Fade */
.spinner-7 {
width: 50px;
height: 50px;
position: relative;
}
.spinner-7 div {
position: absolute;
width: 8px;
height: 8px;
background: #e67e22;
border-radius: 50%;
animation: circle-fade 1.2s linear infinite;
}
.spinner-7 div:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.spinner-7 div:nth-child(2) { top: 15%; right: 15%; animation-delay: -0.1s; }
.spinner-7 div:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); animation-delay: -0.2s; }
.spinner-7 div:nth-child(4) { bottom: 15%; right: 15%; animation-delay: -0.3s; }
.spinner-7 div:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: -0.4s; }
.spinner-7 div:nth-child(6) { bottom: 15%; left: 15%; animation-delay: -0.5s; }
.spinner-7 div:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: -0.6s; }
.spinner-7 div:nth-child(8) { top: 15%; left: 15%; animation-delay: -0.7s; }
/* Spinner 8: Gradient Ring */
.spinner-8 {
width: 50px;
height: 50px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent, #3498db);
animation: spin 1s linear infinite;
position: relative;
}
.spinner-8::before {
content: '';
position: absolute;
inset: 5px;
background: #1a1a2e;
border-radius: 50%;
}
/* Animations */
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
@keyframes pulse {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes bars {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }
}
@keyframes square-spin {
0% { transform: rotate(0deg); border-radius: 0; }
50% { transform: rotate(180deg); border-radius: 50%; }
100% { transform: rotate(360deg); border-radius: 0; }
}
@keyframes circle-fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
</style>
</head>
<body>
<div class="spinner-container">
<div class="spinner-1"></div>
<div class="spinner-label">Classic</div>
</div>
<div class="spinner-container">
<div class="spinner-2"></div>
<div class="spinner-label">Dual Ring</div>
</div>
<div class="spinner-container">
<div class="spinner-3">
<div></div>
<div></div>
<div></div>
</div>
<div class="spinner-label">Dots</div>
</div>
<div class="spinner-container">
<div class="spinner-4"></div>
<div class="spinner-label">Pulse</div>
</div>
<div class="spinner-container">
<div class="spinner-5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="spinner-label">Bars</div>
</div>
<div class="spinner-container">
<div class="spinner-6"></div>
<div class="spinner-label">Square</div>
</div>
<div class="spinner-container">
<div class="spinner-7">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="spinner-label">Circle Fade</div>
</div>
<div class="spinner-container">
<div class="spinner-8"></div>
<div class="spinner-label">Gradient</div>
</div>
</body>
</html>