一个纯css实现的旋转加载动画通过html的div元素和css的@keyframes定义，利用border属性创建环形效果，设置animation实现持续旋转，关键在于仅对border-top设色并应用transform: rotate形成动态视觉，通过调整尺寸、颜色、边框宽度和动画时长可自定义样式，适用于网络请求中的用户反馈提示。
在网页开发中，加载动画能提升用户体验，尤其在网络请求或数据处理时提供视觉反馈。通过 HTML 和 CSS 可以轻松实现一个旋转的进度加载动画，无需 JavaScript 也能完成。
创建基本HTML结构
只需要一个简单的 div 元素作为加载指示器：
这个 div 不需要任何内容，它的样式完全由 CSS 控制。
使用CSS实现旋转动画
通过 CSS 的 @keyframes 定义旋转动画，并用 border 创建环形效果：
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
说明：
- border 设置为浅色，只有 border-top 为深色，形成“扇形”视觉
- border-radius: 50% 确保元素为圆形
- animation 调用名为 "spin" 的关键帧，持续 1 秒，无限循环
- transform: rotate 实现连续旋转
优化与自定义样式
可以根据设计需求调整动画效果：
- 改变 width 和 height 调整大小
- 修改 border-width 控制环的粗细
- 更换颜色使动画更贴合主题
- 调整 animation-duration 控制转速，数值越小越快
例如，想要更细腻的渐变旋转效果，也可以使用 conic-gradient 配合 animation 实现复杂动效，但上述方法最简单且兼容性好。
基本上就这些。一个轻量、高效、纯 CSS 的加载动画就完成了，适合用于按钮加载、页面占位或异步请求状态提示。不复杂但容易忽略细节，比如只设 border-top 有颜色是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
