SVG ローディングスピナー生成器
ガイド
SVG ローディングスピナー生成器
Build crisp, animated SVG loading spinners directly in the browser and copy ready-to-use markup for your project. Pick from seven popular spinner styles, fine-tune size, stroke, colors, and animation speed, then watch the live preview update instantly. Export as a self-contained inline SVG, a plain HTML + CSS snippet, or a React JSX component.
使用方法
- [ブラウザのchrome]を選択し、 spinner type — Circle Stroke, Dual Ring, Dotted Ring, Pulse Dots, Bouncing Dots, Bar Loader, or Ripple.
- 調整 size, stroke width, primary colorと、 track / secondary color to match your brand.
- [名前]を設定してください animation speed (in seconds) to control how fast the loader cycles.
- を選択してください output format: Inline SVG (one file, drops anywhere), HTML + CSS (separate style block), or React Component (JSX).
- Copy the generated code from the output panel or download it as a file.
機能
- Seven spinner styles — Circle Stroke, Dual Ring, Dotted Ring, Pulse Dots, Bouncing Dots, Bar Loader, Ripple.
- Live animated preview on a checker background so you can judge any color choice at a glance.
- Self-contained inline SVG — the animation CSS is embedded inside the SVG, so it works without an external stylesheet.
- HTML + CSS export with a separate style block when you prefer to keep markup and styling apart.
- React Component (JSX) export ready to paste into a Next.js, Vite, or Create React App project.
- Customizable size, stroke, colors, and speed with sensible defaults and validation.
- Accessibility built in — every spinner ships with
role="status"and a configurablearia-labelso screen readers announce loading state. - Scoped class names per snippet, so multiple spinners on the same page never collide.
When to Use Each Spinner
- Circle Stroke / Dual Ring — indeterminate waits where progress is unknown (API calls, page transitions).
- Dotted Ring — classic “thinking” indicator that pairs well with subtle UI.
- Pulse Dots / Bouncing Dots — friendly, conversational contexts like chat “typing” indicators.
- Bar Loader — file uploads, downloads, or anywhere you need a wide, low-profile indicator.
- Ripple — soft, ambient feedback such as the moments just before content appears.
よくある質問
-
Why use SVG for loading spinners instead of an animated GIF?
SVG is a vector format, so spinners stay perfectly sharp at any size and on any pixel density. File sizes are tiny (often a few hundred bytes), the colors can be changed via CSS at runtime, and the animation can be paused, resumed, or restyled without re-encoding the asset. GIFs, by contrast, are raster, larger, lossy at the edges, and locked to whatever colors and speed were baked in when the file was exported.
-
What is the difference between a determinate and indeterminate loading indicator?
A determinate indicator shows real progress toward a known total, like a progress bar that fills from 0% to 100%. An indeterminate indicator simply tells the user that work is happening when the duration or progress cannot be measured — for example, while waiting for a network response. Most spinners (rotating circles, pulsing dots, ripples) are indeterminate; bar loaders can be either, depending on whether they show a moving slice or a filling fraction.
-
When should a loading spinner appear at all?
As a general usability guideline, do not show any indicator for actions that finish in under about 100 ms — the UI feels instant. Between roughly 100 ms and 1 second, a small inline indicator near the affected control is enough. Past 1 second, use a clear spinner. For waits longer than about 10 seconds, switch to a determinate progress indicator with a meaningful message, because users start losing confidence that the system is still working.
-
How do CSS animations work inside an SVG?
CSS animations target SVG elements the same way they target HTML elements: you write a keyframes rule and apply it via the animation property on a class. Common targets include rotate transforms for spins, opacity for fades, and stroke-dashoffset for the drawing effect on circles and lines. To make the rotation pivot at the visual center of a shape, set transform-origin to that point. Animations declared inside a style element inside the SVG itself stay scoped to that document, which is why a self-contained SVG works when dropped into any page.
-
How do you make a loading spinner accessible to screen readers?
Mark the spinner element with role=status (or role=progressbar for determinate progress) so assistive technology treats updates as a live region. Provide a short, meaningful aria-label such as Loading or Saving so the purpose is announced, and avoid relying on color alone to convey state. For determinate progress, also set aria-valuenow, aria-valuemin, and aria-valuemax so the percentage is announced as it updates.
