580 多个Loading 效果，炫酷！

今天来分享国外 CSS 大佬使用纯 CSS 制作的 580 多个 Loading 效果。网址：https://css-loaders.com/

这些与效果的 HTML 结构都很简单，只需一行：

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

想要哪个效果，直接点击就可以复制其 CSS 代码，例如：

/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  background: #25b09b;
  clip-path: polygon(0 0,100% 0,100% 100%);
  animation: l2 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l2 {
  25%  {clip-path: polygon(0    0,100% 0   ,0 100%)}
  50%  {clip-path: polygon(0    0,100% 100%,0 100%)}
  75%  {clip-path: polygon(100% 0,100% 100%,0 100%)}
  100% {clip-path: polygon(100% 0,100% 100%,0 0   )}
}

这里使用 clip-path 属性定义一个多边形裁剪路径，形状是一个从左上角到右下角的三角形。然后，使用动画关键帧@keyframes定义了一个名为"l2"的动画，在动画的关键帧定义中，根据时间的百分比，通过不断改变clip-path属性的值来实现裁剪路径的变化：

• 25%时，裁剪路径为从左上角到右下角的直线

• 50%时，裁剪路径为从左上角到右下角的对角线

• 75%时，裁剪路径为从右上角到右下角的直线

• 100%时，裁剪路径为从右上角到右下角的对角线

这样就实现了一个简单的 Loading 效果。

我们不仅可以直接使用这些 Loading 效果，还可以通过这些 Loading 效果的 CSS 代码来学习 CSS。