css按钮加载中需要旋转菊花图怎么办_用border+keyframes创建纯CSS旋转loading

P粉602998670 2025-12-23 00:00:00 次阅读

纯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 状态。推荐结构如下：

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; }