CSS 旋转加载动画

这是一个完全不使用图片或JavaScript，仅使用纯CSS构建的现代加载动画（Spinner）。通过结合 conic-gradient 和 mask（或 -webkit-mask），实现了描绘出平滑渐变轨迹的时尚动画。

预览

实现代码

只需复制以下代码并粘贴到您项目的HTML和CSS文件中，即可引入此Spinner。

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* 用于裁剪内侧的遮罩设置 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

解说

conic-gradient: 创建从中心点沿圆周改变颜色的渐变。在这个Spinner中，通过从透明（rgba(99, 102, 241, 0)）平滑过渡到完全颜色（rgba(99, 102, 241, 1)），表现出了旋转的轨迹。
mask / -webkit-mask: 将 radial-gradient 作为遮罩使用，使元素的中心部分变得透明。在 calc(100% - 6px) 部分，您可以调整Spinner线条的粗细（在此处为6px）。
animation: 通过 @keyframes 指定 transform: rotate(360deg)，并使用 linear 以恒定速度无限持续旋转。