Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Penyusun Spinner SVG

PengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Spinner Type

Jenis

Tampilan

Size (px)

Stroke Width (px)

Used by stroke-based spinners (Circle Stroke, Dual Ring, Bar Loader, Ripple).

Primary Color

Track / Secondary Color

Track color (Circle Stroke, Dual Ring, Bar Loader) or second dot/arc color.

Animasi

Speed (sec)

Duration of one full animation cycle, in seconds.

Keluaran

Format

ARIA Label

Accessible label announced by screen readers.

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Penyusun Spinner 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.

Cara Penggunaan

Pilih sebuah spinner type — Circle Stroke, Dual Ring, Dotted Ring, Pulse Dots, Bouncing Dots, Bar Loader, or Ripple.
Atur size, stroke width, primary colordan track / secondary color to match your brand.
Tetapkan animation speed (in seconds) to control how fast the loader cycles.
Pilih sebuah 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.

Fitur

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 configurable aria-label so 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.

 Tanya Jawab Umum

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.