Are CSS-only loaders better than SVG or GIF spinners?

For most use cases, yes. CSS loaders ship as a few lines of stylesheet rather than a binary asset, which means no extra HTTP request and no decoding cost. They scale crisp at any DPI (no pixelation like a GIF). They also let you change color, size, and speed at runtime with CSS variables — try doing that with a baked-in GIF. The trade-off is that complex multi-shape animations are still easier in Lottie or SVG. For loaders that fit in 64×64 pixels, CSS wins.

Will my CSS loader run smoothly during heavy JavaScript work?

Mostly. Animations that only mutate transform and opacity (which is what every loader in this generator does) run on the compositor thread, so they keep ticking even when the main thread is busy. The exception is when the browser is paint-thrashing — heavy scroll handlers or large reflows can still cause frame drops. If you see your loader stuttering, the fix is almost always to move work off the main thread (Web Workers, requestIdleCallback, or just not blocking the page during fetches).

How do I make the loader accessible?

Three things: add role='status' to the loader element so assistive tech announces it as a live region. Add aria-label='Loading' (or a more specific message) so screen readers say something instead of just announcing the role. And respect prefers-reduced-motion — wrap your @keyframes in a media query that drops the animation for users who've turned motion off in their OS settings (a static dot or text 'Loading…' is the typical fallback).

When should I show a spinner versus a skeleton screen?

Rule of thumb: under 1 second, no indicator (it'll just flash). 1–3 seconds, a spinner is fine. Over 3 seconds, switch to a skeleton or a progress bar — research from Nielsen Norman Group shows perceived wait time drops 30–50% when users can see content shape forming. Spinners are best for unbounded waits where you don't know what's coming back (form submission, login). Skeletons are best for predictable layouts (article list, profile page) where you can preview the structure.

Why does my loader look different in Safari?

Two common culprits: first, Safari's CSS animation engine can subpixel-render slightly differently from Chromium for sub-pixel transforms — adding transform: translateZ(0) on the spinning element forces a compositor layer and stabilizes it. Second, Safari respects the system 'Reduce Motion' setting more aggressively than other browsers, so what looks like a broken loader might just be a user setting. Test both in 'Develop > Disable Reduce Motion' and on a real device.

CSS 加载动画生成器

无需 JavaScript，只用 CSS 就能制作加载动画。提供 6 种样式，可自由调整颜色、大小和速度，并直接复制 HTML + CSS 到项目里。

动画样式

颜色

轨道颜色

尺寸: 64px

速度（一周期）: 1.0s

线条粗细: 6px

实时预览

HTML + CSS

<!-- HTML -->
<div class="loader" role="status" aria-label="Loading"></div>

<!-- CSS -->
.loader {
  width: 64px;
  height: 64px;
  border: 6px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

这里所有的加载动画都是纯 CSS — 不用 GIF、不用 SVG，也不用 JS 动画库。关键帧只改 transform 与 opacity，因此能用 GPU 加速，即使在繁忙的页面上也很流畅。请加上 role='status' 和 aria-label，让屏幕阅读器能读出加载状态。

使用方法

无需 JavaScript，只用 CSS 就能制作加载动画。提供 6 种样式，可自由调整颜色、大小和速度，并直接复制 HTML + CSS 到项目里。

1Pick a loader style. Spinner is the safe default; pulse and dots are friendlier; ripple draws attention if you want to interrupt.
2Set your brand color. The default indigo is a placeholder — match the loader to a primary CTA color so it reads as part of your UI rather than a stock widget.
3Adjust size for context. 32–48px works inside buttons, 64–80px for inline page loaders, 100px+ only when the loader is the page (full-screen splash).
4Tune speed. Under 0.6s feels frantic; 0.8–1.2s is the sweet spot; over 1.5s starts to feel like the page is broken. Faster ≠ better.
5Click Copy. The output bundles the HTML markup and the CSS — paste into your stylesheet and drop the <div class='loader'> wherever you need it.

主要功能

Six distinct loader styles — spinner, dual-ring, dots, bars, pulse, ripple — covering every common UI need
Live preview that updates as you change color, size, speed, and stroke thickness
Outputs ready-to-paste HTML + CSS — no JS, no SVG, no GIF, no external library
GPU-friendly keyframes (transform/opacity only) so the animation stays smooth on busy pages
Built-in role='status' and aria-label so the loader is accessible to screen readers out of the box

常见问题

了解更多

CSS Loaders Without JavaScript — Six Pure-CSS Spinners and When to Reach for Each