HTML5 中怎么编写循环旋转的 Loading 加载动画-H5教程-PHP中文网

纯css可实现循环旋转loading动画：用border-radius设圆环、border-top-color突出单色弧段、animation配@keyframes实现匀速无限旋转，推荐加transform-origin:center防抖动，支持css变量灵活调整尺寸颜色，并需添加role="status"等提升可访问性。

html5 中怎么编写循环旋转的 loading 加载动画

用 CSS3 的 @keyframes 配合 animation 属性就能轻松实现循环旋转的 Loading 动画，不需要 JavaScript。

基础旋转动画（纯 CSS）

创建一个块级元素（比如 <div class="loader"></div>），用 border 模拟圆环，再通过 border-top-color 突出单色弧段，最后用 transform: rotate() 实现自转：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
<p>@keyframes spin {
to { transform: rotate(360deg); }
}</p>

关键点：
• border-radius: 50% 让方块变圆
• border-top-color 单独设色，形成“缺口圆环”效果
• animation: spin 1s linear infinite 表示无限循环、匀速旋转

更平滑的旋转（推荐加 `transform-origin`）

默认旋转中心是元素中心，但若元素有 margin 或定位偏移，可能抖动。显式声明旋转原点更稳妥：

.loader {
  /* 其他样式不变 */
  transform-origin: center;
}

如果用 width/height 是 0，靠 border 显形（如某些极简 loader），也建议加上 transform-origin: center，避免浏览器渲染偏差。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

适配不同尺寸与颜色（用 CSS 变量）

用自定义属性方便复用和主题切换：

.loader {
  --size: 32px;
  --border-width: 3px;
  --color: #007bff;
  width: var(--size);
  height: var(--size);
  border: var(--border-width) solid rgba(0,0,0,0.1);
  border-top-color: var(--color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  transform-origin: center;
}
<p>@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}</p>

这样后续只需改 style="--color: #ff6b6b; --size: 24px;" 就能快速调整。