⏳ CSS Loader Generator
Generate CSS loading spinner animations with live preview. Choose from dots, rings, bars, and more. Copy pure CSS — no JavaScript needed. Free CSS loader generator.
How to Use
1
Choose a loader type
Click one of the 6 type buttons: Spinner, Dots, Bars, Ring, Pulse, or Bounce.
2
Customize appearance
Set the color using the color picker, adjust size with the slider, and set animation speed.
3
Copy the code
Click Copy Code to copy both the CSS and HTML markup. Paste into your project.
Frequently Asked Questions
What is a CSS loader?
A CSS loader (also called a spinner or loading indicator) is a pure CSS animation that shows users content is loading. Using CSS instead of GIFs gives you smaller file sizes, smoother animations, and easy customization.
How do I center a CSS spinner on the page?
Use flexbox: add display:flex; justify-content:center; align-items:center; height:100vh; to the container. Or use position:fixed with top:50%; left:50%; transform:translate(-50%,-50%) on the loader itself.
What animation properties are used in CSS loaders?
@keyframes defines the animation frames. animation sets the name, duration, iteration count (infinite), and timing function. transform:rotate() creates spinning, and opacity changes create pulse effects.
Can I use these CSS loaders in React or Vue?
Yes — copy the CSS into your stylesheet and the HTML into your component. In React, convert class to className. For Vue, use the HTML directly in your template.
What is the performance impact of CSS animations?
CSS animations using transform and opacity are GPU-accelerated and have minimal performance impact. Avoid animating properties like width, height, top, or left as they trigger layout reflows and are more expensive.
完整指南：CSS加载动画生成器
什么是CSS加载动画？
CSS加载动画告知用户操作正在进行中。纯CSS实现——无需图片，可缩放，可用CSS变量改变颜色。使用@keyframes和transform，比GIF图高效得多。
如何使用
- 选择类型：环形、点状、进度条、脉冲。
- 调整颜色、大小和速度。
- 复制HTML和CSS。
专业技巧
- 添加
role="status"和隐藏文本以提高无障碍访问性。 - 按钮加载状态时显示小型spinner而不是禁用按钮。
linear匀速，ease-in-out更有机感。