如何实现Bootstrap纯CSS实现的加载动画_利用spinner-border的CSS动画-css教程-PHP中文网

spinner-border 默认动画通过@keyframes+border+currentColor实现：实色边框构成环形，border-right-color:transparent与border-radius:50%配合rotate(360deg)匀速旋转，缺一不可。

如何实现bootstrap纯css实现的加载动画_利用spinner-border的css动画

spinner-border 默认动画是怎么工作的

它靠的是 @keyframes spinner-border + border + currentColor 三者配合：用实色边框构成环形，右侧边框设为透明，再通过 transform: rotate(360deg) 让整个环匀速转一圈。关键点是 border-radius: 50% 和 border-right-color: transparent 缺一不可，否则不是圆环，而是四边形旋转。

常见错误现象：spinner-border 显示为方块、只转半圈、边缘锯齿明显、旋转中心偏移——基本都是因为覆盖了 border 样式但没同步重置 border-radius 或漏写了 transparent。

不要改 border-style：必须是 solid，换成 dashed 或 dotted 会断开环形轨迹
别手动设 border-color：它依赖 currentColor 继承父级文字颜色，直接写死颜色会破坏 text-primary 等语义类效果
动画时长由 animation-duration 控制，默认 0.75s，调太快易眩晕，太慢（>1.2s）会让用户怀疑卡死

如何不写 JS 就让 spinner-border 随按钮尺寸自适应

Bootstrap 5 的 spinner-border 默认宽高是 2rem，而 .btn 的高度由 padding 和 font-size 动态决定，硬写 width: 2rem 必然错位。真正能联动的单位只有 em。

操作要点：

给按钮加 position: relative; overflow: hidden
spinner-border 元素设为 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
宽高统一用 em：对应 .btn-sm 用 1.2em，.btn-md（默认）用 1.5em，.btn-lg 用 1.8em
确保按钮有明确 font-size（Bootstrap 默认是 0.875rem 或 1rem），否则 em 会继承错误基准

绝对禁止用 scale() 缩放：会导致边框像素模糊、旋转中心偏移、高 DPI 屏幕下锯齿加重。

为什么加了 spinner-border 按钮文字却上跳或塌陷

根本原因是 spinner-border 是 display: inline-block，它和按钮内文字共处于同一行流，会参与行高计算。一旦插入，就会顶开原有文字位置，尤其在小屏幕或紧凑布局中更明显。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

解决路径不是“压住它”，而是“隔离它”：

原按钮文字必须包在或 里，加载时设 visibility: hidden 或 display: none（推荐后者，避免占位）
不要只靠 opacity: 0 隐藏文字：透明但仍在文档流，按钮宽度可能突变


必须加 role="status" 和 aria-hidden="true" 到 spinner-border 元素本身，否则读屏器会重复播报 “Loading”
按钮禁用状态必须同步设 disabled 属性，不能只靠样式模拟，否则键盘用户仍可触发
纯 CSS 实现淡入淡出动画的关键细节
直接切 display: none/block 或反复操作 style.opacity 都会卡顿。平滑过渡靠的是 opacity 和 visibility 双属性+延迟配合。
初始状态必须设：
.spinner-border {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s 0.2s;
}
.spinner-border.showing {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s, visibility 0s;
}

JS 只需切换 showing 类名，不要手动操作 style。漏掉 transition-delay 中的 0.2s，淡出时就会闪一下。
容易被忽略的一点：所有涉及 spinner-border 的容器（比如按钮、弹窗遮罩）都必须有明确的 z-index 和 position 上下文，否则在复杂 DOM 层级中，绝对定位的 spinner 可能被兄弟元素遮挡，看起来像“没出现”。