CSS Loading Spinner Generator
Pick a ring, dot, or pulse spinner, tune the color and speed, and copy pure CSS
Choose from five loading spinner styles—ring, dual ring, dots, pulse, and bars—then adjust the size, color, and speed with a live preview. It copies as pure HTML and CSS with no images or external libraries, so it drops lightly into any web project.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Pick a spinner style tab (ring, dual ring, dots, pulse, or bars).
- Adjust the size, thickness, and speed sliders and the color to fine-tune the preview.
- Grab the code with 'Copy HTML' and 'Copy CSS' (or copy it all at once).
- Drop the HTML where you want the loader and paste the CSS into your stylesheet—done.
FAQ
- Are my settings sent to a server?
- No. Choosing a style, previewing, and generating the code all happen entirely in your browser. Nothing is ever transmitted or stored on a server.
- Do I need images or an external library?
- No. The generated code is pure HTML and CSS animation (@keyframes), so it works without any GIF images or JavaScript libraries.
- How do I center the spinner?
- Give the spinner's parent element display:flex; justify-content:center; align-items:center;. You can freely tweak the color and speed just by changing the values in the generated CSS.