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サイクル）: 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を忘れずに。

使い方

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