用 CSS3 做一个旋转加载样式，其实比想象中要简单得多。核心就两个东西：animation 动画和 transform: rotate() 旋转变换。先给一个最基础的版本，看看效果。

HTML 结构就一个普通的 div，给它一个类名，比如 loader：

CSS 这边，关键在于四行代码：定义尺寸、边框、圆角，然后绑定动画。下面是完整代码：

.loader {
  width: 50px;
  height: 50px;
  border: 4px solid #3498db;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

思路其实很直接：用 border-top: transparent 让圆环顶部“消失”，形成一个缺口，看起来就像正在加载的旋转指针。然后通过 @keyframes spin 让它从0度转到360度，animation: spin 1s linear infinite 表示1秒转一圈，匀速、无限循环。就这么简单，一个动态加载器就出来了。

当然了，实际项目中你可能需要调整尺寸、颜色、速度。比如把 border 改成 2px 让线条更细，或者把 1s 改成 0.8s 让转得更快一点。这都是可以自由定制的。这个示例已经足够作为一个起点，剩下的就看你自己的创意了。

《夸克》非常好用的免费AI浏览器

下载APP查看