{"id":171,"date":"2026-05-14T09:21:56","date_gmt":"2026-05-14T13:21:56","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=171"},"modified":"2026-05-05T09:22:11","modified_gmt":"2026-05-05T13:22:11","slug":"css-loader-spinner","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/css-loader-spinner\/","title":{"rendered":"CSS Loader Generator: 60+ Pure-CSS Spinners [2026]"},"content":{"rendered":"
TL;DR:<\/strong> A CSS loader (or “CSS spinner”) is an animated waiting indicator built with pure CSS \u2014 no JavaScript, no SVG sprites, no GIFs. The five common patterns are spinning circles<\/strong> (border + animation), bouncing dots<\/strong> (3-dot pulse), progress bars<\/strong> (animated linear-gradient), skeleton screens<\/strong> (pulsing rectangles representing content shape), and conic gradients<\/strong> (modern Chromium+ Safari). Our free CSS loader generator<\/a> ships 60+ presets, lets you customise size\/speed\/colour, and outputs accessible CSS that respects prefers-reduced-motion<\/code>.<\/div>\n

Adding a loading spinner used to mean dropping a 12 KB animated GIF into your project. CSS animations made it weight-zero \u2014 a few hundred bytes of CSS, GPU-accelerated rendering, instantly responsive to dark mode and theme changes. The result: every modern app uses pure-CSS loaders. The challenge: writing a smooth, accessible loader from scratch involves keyframes, timing functions, transform-origin, and accessibility considerations that aren’t obvious.<\/p>\n

Our CSS loader generator<\/a> ships 60+ tested presets across five categories \u2014 spinning circles, dots, bars, skeleton screens, and conic-gradient loaders. Customise size, speed, colour, and stroke width with sliders. Copy production-ready CSS that includes prefers-reduced-motion<\/code> handling and proper ARIA attributes. This guide covers when each loader type is appropriate, the accessibility traps, and the performance gotchas that turn a smooth spinner into a paint-thrashing battery drain.<\/p>\n

Five loader types and when to use each<\/h2>\n\n\n\n\n\n\n\n\n\n
Type<\/th>\nBest for<\/th>\nAvoid when<\/th>\n<\/tr>\n<\/thead>\n
Spinning circle<\/strong><\/td>\nGeneric “loading…” (under 1s)<\/td>\nUser waits more than 3s \u2014 feels unresponsive<\/td>\n<\/tr>\n
Bouncing dots<\/strong><\/td>\nChat \/ typing indicators<\/td>\nPage-level loading \u2014 too playful<\/td>\n<\/tr>\n
Progress bar<\/strong><\/td>\nKnown-duration tasks<\/td>\nIndeterminate progress (use indeterminate variant)<\/td>\n<\/tr>\n
Skeleton screen<\/strong><\/td>\nContent-heavy pages \u2014 feels faster than spinners<\/td>\nSingle-element waits \u2014 overkill<\/td>\n<\/tr>\n
Conic-gradient<\/strong><\/td>\nModern, distinctive loaders<\/td>\nIE \/ very old browser support required<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

A canonical pure-CSS spinner<\/h2>\n

The simplest CSS spinner is a circle with a transparent top border, rotated indefinitely. About 8 lines of CSS, GPU-accelerated, ~200 bytes minified:<\/p>\n

.loader {\r\n  width: 32px;\r\n  height: 32px;\r\n  border: 4px solid #e0e0e0;\r\n  border-top-color: #635BFF;\r\n  border-radius: 50%;\r\n  animation: spin 0.8s linear infinite;\r\n}\r\n@keyframes spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .loader { animation-duration: 3s; }\r\n}<\/code><\/pre>\n
The reduced-motion media query slows the animation rather than stopping it \u2014 users with vestibular disorders prefer slow over absent. Stopping animations entirely can break the implied “still loading” message.<\/p>\n
How to build a loader in your browser<\/h2>\n
    \n
  1. Open the CSS loader generator<\/a><\/li>\n
  2. Pick a preset from the gallery (60+ available across 5 categories)<\/li>\n
  3. Adjust size, speed (animation duration), colour, and stroke width<\/li>\n
  4. Watch the live preview animate in real time<\/li>\n
  5. Click Copy CSS<\/strong> for production-ready code with prefers-reduced-motion<\/code> handling<\/li>\n
  6. Or click Copy as HTML+CSS<\/strong> for a complete drop-in component<\/li>\n<\/ol>\n
    Accessibility \u2014 the loaders that beat off-the-shelf libraries<\/h2>\n
    Most spinners shipped on Stack Overflow and CodePen miss accessibility basics:<\/p>\n