Do the loaders require JavaScript?

No — all loaders are pure CSS animations using @keyframes. They work in any modern browser without any JavaScript dependency.

Can I use these in production?

Yes. The generated code is clean, minimal, and production-ready. You can copy the HTML and CSS directly into your project.

How do I change the loader color?

Use the color picker in the controls panel. The color is applied as a CSS custom property so you can also override it with your own CSS variable.

What preset loaders are available?

Seven presets are included: Spinning Ring, Bouncing Dots, Bars, Pulse, Three Dots, Ripple, and Clock. Each has its own unique CSS animation.

CSS Loader Generator

关于此工具

Create beautiful, pure-CSS loading spinners and animations without any JavaScript or images. Choose from preset styles — spinning ring, bouncing dots, bars, pulse, three-dot ellipsis, ripple, and clock — then customize size, color, animation speed, and stroke width. Copy the generated HTML and CSS code directly into your project. The live preview updates in real time as you adjust settings.

使用方法

1 Select a loader preset from the dropdown menu.
2 Adjust size, color, animation speed, and stroke width using the controls.
3 Watch the live preview update instantly as you make changes.
4 Click 'Copy HTML' or 'Copy CSS' to copy the generated code to your clipboard.
5 Paste the code into your project — no additional dependencies required.

Why a pure-CSS loader beats an animated GIF or JavaScript spinner

A loading indicator's whole job is to appear instantly and reassure the user that something is happening. A pure-CSS loader does this better than the alternatives: it is a few lines of markup with no image to download, no JavaScript to parse and execute, and no extra HTTP request. The animation runs on the browser's compositor thread using transform and opacity, which are the two properties browsers can animate without re-laying-out the page — so the spinner stays smooth even while the main thread is busy fetching the very thing you are waiting on. This generator builds exactly that: a small block of HTML plus a @keyframes rule, with nothing else attached.

How each preset is constructed

Every preset is one or more <div>/<span> elements styled and animated entirely in CSS. The seven styles use different techniques:

Preset	Technique
Spinning Ring	A circle with a transparent border and one colored edge, rotated 360°
Bouncing Dots	Three dots scaling up and down on staggered delays
Bars	Four bars whose height oscillates with offset timing
Pulse	A single circle scaling and fading in and out
Three Dots	An ellipsis effect using `steps(1)` for a discrete on/off blink
Ripple	Two expanding rings, the second delayed by half the cycle
Clock	A bordered circle with a rotating hand

The staggered animation delays are what create the "wave" effect in the dots and bars. For the bouncing dots, the second dot starts one-third of the way through the cycle and the third two-thirds through, so they peak in sequence rather than all at once.

A worked example: reading the spinning ring

Set size to 40px, stroke to 4px, speed to 1.0s, and a color of #6366f1, and the generator emits this CSS:

.loader { width: 40px; height: 40px; border: 4px solid #6366f133; border-top: 4px solid #6366f1; border-radius: 50%; animation: spin 1s linear infinite; }

Two details make it work. The full border uses your color with 33 appended — that is the hex code for about 20% opacity, giving a faint "track." Only border-top gets the solid color, so a single bright arc rides around a dim ring. The @keyframes spin rule rotates the element to { transform: rotate(360deg); }, and linear infinite makes it loop forever at a constant speed. Lowering the speed value spins it faster; raising it slows the rotation.

Tuning the controls

Size sets the width and height in pixels. For dots and bars the individual elements are derived from this — dots are roughly a quarter of the overall size, bars a sixth — so one slider scales the whole loader proportionally.
Speed is the duration of one full animation cycle in seconds. Lower is faster. Around 0.8–1.2s reads as "active" without looking frantic.
Stroke controls border thickness for the ring, ripple, and clock. It has no visible effect on the dot- and bar-based presets, which have no border.
Color is applied directly into the generated CSS. The live preview updates as you drag every slider, so you can dial in the exact look before copying.

Practical tips

Match the spinner to perceived wait time. A smooth continuous spinner (ring, clock) suits short waits; a progress-like pulse or bars feel right for longer operations.
Respect reduced-motion users. Some people disable animations for comfort or accessibility. Wrap the animation in @media (prefers-reduced-motion: no-preference) or provide a static fallback so the loader does not move for users who asked for stillness.
Color it with a CSS variable. The generated rule hard-codes your hex value, but you can swap it for var(--loader-color) after copying so the spinner inherits your theme automatically.
Center it with flex. Drop the loader in a container with display:flex; align-items:center; justify-content:center to position it in the middle of a card or overlay.

Common mistakes

Animating layout properties. If you later edit the CSS to animate width or margin instead of transform, the browser must re-layout every frame and the spinner can stutter. Stick to transform and opacity.
Class-name collisions. The generated markup uses the class .loader. If your page already has a different .loader rule, rename one of them so the styles do not clash.
Leaving the spinner running forever. A CSS animation never stops on its own. Remove the element (or its class) from the DOM once your content loads, or it will spin behind your finished page.

Browser support and use cases

Every technique here — @keyframes, transform, border-radius, flexbox — is supported in all current browsers, so the output is genuinely production-ready. Typical uses include button loading states, full-page overlays during navigation, skeleton placeholders while data fetches, and inline indicators next to an item being saved. Because the whole loader is text, you can paste it straight into a component, a Tailwind project, or a plain HTML file with zero dependencies.