纯CSS实现按钮加载旋转菊花图：通过0宽高元素+三边实色一边透明的border配合border-radius:50%形成圆环，再用@keyframes定义rotate(360deg)动画实现旋转，结合display切换控制显隐，轻量易复用。
用纯 CSS 实现按钮加载中的旋转菊花图，核心思路是：利用 border 的边框渐变视觉 + @keyframes 控制旋转动画，不依赖图片或 SVG，轻量、易复用。
基础结构：用 border 画出“菊花”雏形
一个常见的做法是创建一个无宽高、仅靠上下左右边框构成的“圆环”。关键点在于：
- 设置元素宽高为 0
- 四边 border 宽度一致（如
4px），但只保留其中三边为实色，一边设为透明（或不同颜色），形成缺口感 - 用
border-radius: 50%让边框闭合成近似圆形
示例代码：
.loading-spinner {
width: 0;
height: 0;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff; /* 高亮顶部边框，形成旋转焦点 */
border-radius: 50%;
}添加旋转动画：用 @keyframes + transform
定义一个无限顺时针旋转的动画，作用于该元素：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-spinner {
animation: spin 1s linear infinite;
}注意：必须加 display: inline-block 或 block，否则旋转可能不生效；若按钮内联显示，建议用 vertical-align: middle 对齐文字。
集成到按钮中：状态切换控制显隐
实际使用时，通常通过 JS 切换按钮 class 来启用/禁用 loading 状态。推荐结构如下：
<button class="btn"> <span class="btn-text">提交</span> <span class="btn-loading"></span> </button>
CSS 控制逻辑：
- 默认隐藏
.btn-loading - 按钮加
.loading类时，隐藏文字、显示 loading 元素 - loading 元素本身用上面的 border+animation 样式
示例片段：
.btn-loading {
display: none;
width: 0; height: 0;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.btn.loading .btn-text { display: none; }
.btn.loading .btn-loading { display: inline-block; }微调与兼容性提示
让效果更自然的小技巧：
- 动画时长建议 0.6s ~ 1s，太快眩晕，太慢显得卡顿
- 边框颜色可用
currentColor，自动继承按钮文字色，适配深色/浅色主题 - 在老版 Safari 中，
transform可能需加-webkit-transform前缀（现代项目可忽略） - 如需更精细控制（比如三段式加载），可扩展为多个
border层叠或改用伪元素模拟多瓣
基本上就这些 —— 不需要 JS 绘图，不引入额外资源，一行 border + 一段 keyframes，就能跑起来一个干净的 loading 菊花。
