今天來分享國外 CSS 大佬使用純 CSS 制作的 580 多個(gè) Loading 效果。網(wǎng)址：https://css-loaders.com/

這些與效果的 HTML 結(jié)構(gòu)都很簡單，只需一行：

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

想要哪個(gè)效果，直接點(diǎn)擊就可以復(fù)制其 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 屬性定義一個(gè)多邊形裁剪路徑，形狀是一個(gè)從左上角到右下角的三角形。然后，使用動畫關(guān)鍵幀@keyframes定義了一個(gè)名為"l2"的動畫，在動畫的關(guān)鍵幀定義中，根據(jù)時(shí)間的百分比，通過不斷改變clip-path屬性的值來實(shí)現(xiàn)裁剪路徑的變化：

• 25%時(shí)，裁剪路徑為從左上角到右下角的直線
• 50%時(shí)，裁剪路徑為從左上角到右下角的對角線
• 75%時(shí)，裁剪路徑為從右上角到右下角的直線
• 100%時(shí)，裁剪路徑為從右上角到右下角的對角線

這樣就實(shí)現(xiàn)了一個(gè)簡單的 Loading 效果。

我們不僅可以直接使用這些 Loading 效果，還可以通過這些 Loading 效果的 CSS 代碼來學(xué)習(xí) CSS。