CSS Loading Spinner Generator
Pick a ring, dot, or pulse spinner, tune the color and speed, and copy pure CSS
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
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.
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.