CSS loader generator

Build an animated CSS loading spinner — pick a style, colour and speed — and copy the HTML and CSS, on your device.

Advanced settings (optional)

Loader

Style

Colour

track

Size

5252px

Thickness

66px

Speed

101.0s

Backdrop

Dark preview

HTML + CSS

/* HTML */
<span class="itl-loader"></span>

/* CSS */
.itl-loader{
  display:inline-block; width:52px; height:52px;
  border:6px solid #e2e8f0;
  border-top-color:#00bda3;
  border-radius:50%;
  animation:itl-spin 1s linear infinite;
}
@keyframes itl-spin{ to{ transform:rotate(360deg); } }

CSS loader / spinner · copy or download CSS · made in your browser

Runs in your browser. Files are never uploaded — you can go offline after the page loads.

How to use the CSS Loader Generator

Pick a loader style — ring, dots, bars or pulse.
Set the colour, size and speed in the big preview.
Copy the HTML + CSS, or download a .css file.

Easy to use

Drop files, pick options, download. Whole folders at once, no signup, no daily limit.

Best quality

The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.

Private & secure

Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.

Make a pure-CSS loading spinner

Choose a ring, dual-ring, bouncing dots, stretching bars or pulse loader, then set the colour, size, thickness and speed and watch it animate live. It’s a copy-paste loading indicator with no images and no JavaScript — all in the big preview window with the settings on the right.

Copy the ready-to-paste HTML and CSS, or download a .css file. Everything is generated in your browser, so nothing is uploaded. Pair it with the neumorphism generator or box-shadow generator for the rest of your UI.

Frequently asked questions

Does the loader need JavaScript?

No — every loader is pure HTML and CSS with a keyframe animation, so it works anywhere CSS does.

How do I use it?

Copy the HTML markup and the CSS into your page. The dots and bars styles include the small child elements they need.

Neumorphism GeneratorDesign soft-UI neumorphism Box Shadow GeneratorDesign layered CSS box-shadows with a live preview and copy the exact code Glassmorphism GeneratorDesign the frosted-glass look with backdrop-blur and transparency, previewed live over a colourful backdrop

Your files never leave your device

Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.

No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.

More free tools

Need icons or SVGs to start from?

InfyTool is built by the same team as these free libraries.

InfyIconFree SVG and PNG icons you can open directly in these tools. InfySVGFree SVG designs and illustrations, ready to optimise or convert. InfyPNGFree transparent PNG graphics for mockups and social posts.