Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: sans-serif; background-color: #f0f0f0; } .spinner { width: 50px; height: 50px; border: 5px solid rgba(0, 123, 255, 0.2); border-radius: 50%; border-top-color: #007bff; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 4s; /* Slow it down significantly instead of stopping it, to still indicate loading */ } } </style> <div class="spinner" role="status" aria-label="Loading"></div>
