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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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。