今天向大家介绍一个国外牛人开发的网站。这个网站收集了 500 多种不同的 loading 效果，种类繁多。也许你以前一直使用 GIF 图或者简陋的文字“加载中”来代替 loading 效果，但现在你有更多的选择了。我会在文末附上链接。

使用方式非常简单，只需要一个 HTML 标签：

<div class="loader"></div>

然后移动鼠标到相应的效果上面，复制 CSS 代码到你的项目中即可。

这些代码也是学习 CSS 图形和动画的很好的案例。例如下面这个：

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

这段代码用于创建一个绿色的圆形加载动画。通过使用遮罩（mask）来隐藏不需要显示的部分。通过rotate(1turn)将元素旋转一周，实现加载效果。

下面这个的实现很简单，但这个思路可能你会想不到：

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: orange;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}

这里他仅仅使用不同颜色的边框实现。还有更多有趣的案例，有兴趣可以自己去看看。

链接地址：https://css-loaders.com/spinner/