8 Unique CSS Loaders

Unique CSS Loaders

Spinner

Bouncing Dots

Pulsing Circle

Rotating Bars

Dual Ring

Wave Dots

Cube Grid

Flip Square

:root { --loader-size: 48px; --loader-color: #fff; --loader-accent: #00e0ff; --loader-bg: #111; --label-color: #aaa; } html, body { height: 100%; margin: 0; padding: 0; background: var(--loader-bg); color: var(--loader-color); font-family: 'Inter', Arial, sans-serif; min-height: 100vh; } main { max-width: 900px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 2rem; font-weight: 600; margin-bottom: 2rem; letter-spacing: 0.02em; color: var(--loader-color); text-align: center; } .loader-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2.5rem 2rem; width: 100%; max-width: 800px; } .loader-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; min-height: 120px; padding: 12px 0; } .loader-label { margin-top: 1.1rem; font-size: 1rem; color: var(--label-color); letter-spacing: 0.01em; user-select: none; } /* Spinner */ .spinner { width: var(--loader-size); height: var(--loader-size); border: 4px solid rgba(255,255,255,0.15); border-top: 4px solid var(--loader-accent); border-radius: 50%; animation: spin 1s linear infinite; box-sizing: border-box; } @keyframes spin { to { transform: rotate(360deg); } } /* Bouncing Dots */ .bouncing-dots { display: flex; align-items: flex-end; height: var(--loader-size); gap: 0.4em; } .bouncing-dots div { width: 12px; height: 12px; background: var(--loader-accent); border-radius: 50%; animation: bounce 0.7s infinite alternate; } .bouncing-dots div:nth-child(2) { animation-delay: 0.15s; } .bouncing-dots div:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { to { transform: translateY(-18px); opacity: 0.7; } } /* Pulsing Circle */ .pulsing-circle { width: var(--loader-size); height: var(--loader-size); background: var(--loader-accent); border-radius: 50%; opacity: 0.7; animation: pulse 1.1s cubic-bezier(0.4,0,0.2,1) infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; } } /* Rotating Bars */ .rotating-bars { position: relative; width: var(--loader-size); height: var(--loader-size); } .rotating-bars div { position: absolute; left: 50%; top: 50%; width: 6px; height: 22px; background: var(--loader-accent); border-radius: 3px; transform-origin: center 32px; opacity: 0.7; animation: bar-rotate 1.1s linear infinite; } .rotating-bars div:nth-child(1) { transform: rotate(0deg) translateY(-16px); animation-delay: 0s; } .rotating-bars div:nth-child(2) { transform: rotate(90deg) translateY(-16px); animation-delay: 0.2s; } .rotating-bars div:nth-child(3) { transform: rotate(180deg) translateY(-16px); animation-delay: 0.4s; } .rotating-bars div:nth-child(4) { transform: rotate(270deg) translateY(-16px); animation-delay: 0.6s; } @keyframes bar-rotate { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } /* Dual Ring */ .dual-ring { width: var(--loader-size); height: var(--loader-size); display: inline-block; position: relative; } .dual-ring:after { content: " "; display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--loader-accent); border-color: var(--loader-accent) transparent var(--loader-accent) transparent; animation: dual-ring-spin 1.2s linear infinite; box-sizing: border-box; } @keyframes dual-ring-spin { 100% { transform: rotate(360deg); } } /* Wave Dots */ .wave-dots { display: flex; align-items: center; height: var(--loader-size); gap: 0.3em; } .wave-dots div { width: 10px; height: 10px; background: var(--loader-accent); border-radius: 50%; animation: wave 0.8s infinite; } .wave-dots div:nth-child(1) { animation-delay: 0s; } .wave-dots div:nth-child(2) { animation-delay: 0.15s; } .wave-dots div:nth-child(3) { animation-delay: 0.3s; } .wave-dots div:nth-child(4) { animation-delay: 0.45s; } @keyframes wave { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-16px); opacity: 1; } } /* Cube Grid */ .cube-grid { width: var(--loader-size); height: var(--loader-size); display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; } .cube-grid div { width: 18px; height: 18px; background: var(--loader-accent); opacity: 0.7; animation: cube-fade 1.2s infinite; } .cube-grid div:nth-child(1) { animation-delay: 0s; } .cube-grid div:nth-child(2) { animation-delay: 0.2s; } .cube-grid div:nth-child(3) { animation-delay: 0.4s; } .cube-grid div:nth-child(4) { animation-delay: 0.6s; } @keyframes cube-fade { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Flip Square */ .flip-square { width: var(--loader-size); height: var(--loader-size); background: var(--loader-accent); border-radius: 8px; animation: flip 1.1s cubic-bezier(0.4,0,0.2,1) infinite; transform-style: preserve-3d; } @keyframes flip { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } /* Responsive grid */ @media (max-width: 900px) { .loader-grid { gap: 2rem 1.2rem; max-width: 100%; } } @media (max-width: 700px) { .loader-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2rem 1rem; } } @media (max-width: 500px) { .loader-grid { grid-template-columns: 1fr; grid-template-rows: repeat(8, 1fr); gap: 1.5rem 0; } .loader-cell { min-width: 0; min-height: 80px; } }