最简CSS旋转菊花动画通过@keyframes定义rotate(360deg)动画，配合border-top-color与transparent三边实现环形缺口，结合border-radius:50%和animation:spin 1s linear infinite达成流畅加载效果。
用 CSS @keyframes 实现最简旋转菊花
纯 CSS 实现加载动画不需要 JS，核心是 @keyframes 定义旋转 + border 伪造环形缺口。常见错误是直接给元素设 border: 4px solid #ccc 再旋转——这样转出来是实心圆盘，不是“菊花”效果。
关键在于只保留单边 border（比如 border-top），其余三边透明：
.spinner {
width: 20px;
height: 20px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
- 必须设
border-radius: 50%，否则是方框转圈 -
border四边不能全写 solid，否则没缺口；用rgba()控制底色透明度，避免重叠干扰 - 动画时长建议 0.8–1.2s，太快晕，太慢像卡住
用 SVG <circle></circle> + stroke-dasharray 做更精准控制
当需要控制旋转起点、缺口大小或适配深色背景时，SVG 方案更可靠。本质是画一个圆环，再用 stroke-dasharray 截出一段弧，靠 stroke-dashoffset 移动它来模拟旋转。
<svg class="spinner-svg" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="#007bff" stroke-width="4"
stroke-dasharray="125.6" stroke-dashoffset="0"></circle>
</svg>
其中 125.6 ≈ 2 × π × 20（圆周长），stroke-dasharray="125.6" 表示整圈是一段实线，stroke-dashoffset 动态变化就能“滚动”这段线。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 动画需用 CSS 控制
stroke-dashoffset：从125.6到0循环 - 比纯 CSS 方案更易对齐设计稿的缺口角度（改
stroke-dasharray第二值即可） - 注意
viewBox和r要匹配，否则缩放失真
React/Vue 中动态控制显示隐藏的坑
动画元素本身不占布局流（position: absolute 或 display: none）时，组件卸载/挂载容易闪一下。常见错误是直接用 v-if 或 {isLoading && <spinner></spinner>}。
- 推荐用
opacity: 0+visibility: hidden配合 CSS 过渡，等动画结束再移除 DOM - React 可用
useTransition或useDeferredValue避免阻塞主渲染 - Vue 中慎用
<transition></transition>的mode="out-in"，可能造成菊花消失延迟 - 务必加
aria-live="polite"和role="status"，屏幕阅读器才感知加载状态
移动端 Safari 的 transform 3D 强制硬件加速问题
iOS Safari 对 transform: rotate() 渲染有偶发掉帧，尤其在低电量模式下。单纯加 will-change: transform 效果有限，真正有效的是触发 GPU 加速。
- 在 spinner 元素上加
transform: translateZ(0)或transform: rotateZ(0) - 避免同时对父容器设
overflow: hidden，会截断硬件加速层 - 如果菊花在 modal 里卡顿，检查 modal 是否用了
backdrop-filter——这个和旋转动画抢 GPU 资源
复杂点在于，加了硬件加速后，某些安卓 WebView 反而模糊，得靠 image-rendering: -webkit-optimize-contrast 补救。这类细节往往上线后才暴露。
