Interview Question

How do you create a loading spinner?

A spinner is a rotating visual indicator that must accompany an accessible loading message.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

A CSS spinner can rotate a bordered element while text communicates the loading state. • The visual spinner should not be the only accessible status information. • A linear infinite rotation creates the common circular effect. • Reduced-motion users can receive a static indicator.

💡 Simple Example

.spinner { inline-size: 2rem; aspect-ratio: 1; border: .25rem solid #ccc; border-top-color: royalblue; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(1turn); } }

⚡ Quick Revision

A spinner is a rotating visual indicator that must accompany an accessible loading message.