CSS Loader Generator

Create a circle with border, make one side transparent, and animate it: border: 4px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.6s linear infinite. This tool generates various loader styles — spinners, dots, bars, and skeleton screens.

Use spinners for short waits (<3s), progress bars when you can measure progress, skeleton screens for content loading (best UX), and dots/pulse for background operations. Avoid spinners for long waits — use a progress indicator or status message instead.

Create placeholder elements matching your content layout with a subtle pulse animation: background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200%; animation: shimmer 1.5s infinite. Replace with real content once loaded.

Yes — add role='status' and an aria-label like 'Loading' to your spinner container. For screen readers, include visually hidden text: <span class='sr-only'>Loading...</span>. Use aria-busy='true' on the content area being loaded to inform assistive technology.