• ? Github Star: 19.3k^[1]

• ? 官網(wǎng)^[2]

SpinKit 是什么？

SpinKit 是基于 CSS3 的加載動畫庫，僅使用 transform 和 opacity 來創(chuàng)建流暢且易用的動畫。他利用 CSS3 動畫的強大功能，創(chuàng)建了一系列流暢、易于定制的動畫效果。接下來，我們將一起討論下 SpinKit 的使用方法和應用場景。

SpinKit 的主要特點在于它的簡潔性和易用性。它不僅提供了多種風格的動畫效果，而每種動畫都能通過簡單的 HTML 和 CSS 代碼輕松集成到項目。另外，通過學習 SpinKit 源碼實現(xiàn)，可以更好學習和應用 CSS3 。

如上圖所示，SpinKit 提供 12 種動畫效果。

快速開始

在項目中使用 SpinKit 是比較方便的，可以通過 npm 安裝也可以直接下載源碼到項目中。

npm install spinkit

引入 spinkit.css 或者 spinkit.min.css 即可。

 <div class="example">
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
  </div>

默認情況下，加載器的 width 和 height 均是 40px，background-color 是 #333。通過覆蓋 --sk-size 調整寬高 --sk-color 調整背景色。

:root {
    --sk-color: #fff; // 設置為白色
}
.example {
  padding: 10px;
  background-color: #1abc9c;
}

效果如下：

實現(xiàn)原理

SpinKit 追逐點加載動畫實現(xiàn)源碼：

/* 定義追逐動畫的容器樣式 */
.sk-chase {
  width: 40px;
  height: 40px;
  position: relative; /* 將元素定位為相對定位，以便絕對定位的子元素可以基于此元素定位 */
  animation: sk-chase 2.5s infinite linear both; /* 應用名為sk-chase的動畫，持續(xù)2.5秒，無限循環(huán)，線性時間函數(shù)，動畫前后狀態(tài)都保留 */
}
/* 定義追逐點的樣式 */
.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute; /* 將元素定位為絕對定位，相對于其最近的已定位（非static）祖先元素定位 */
  left: 0;
  top: 0; /* 將點定位到容器的左上角 */
  animation: sk-chase-dot 2.0s infinite ease-in-out both; /* 應用名為sk-chase-dot的動畫，持續(xù)2秒，無限循環(huán)，ease-in-out時間函數(shù)，動畫前后狀態(tài)都保留 */
}
/* 定義追逐點的偽元素樣式 */
.sk-chase-dot:before {
  content: ''; /* 創(chuàng)建一個偽元素 */
  display: block; /* 使偽元素顯示為塊級元素 */
  width: 25%;
  height: 25%;
  background-color: #fff; /* 設置偽元素的背景顏色為白色 */
  border-radius: 100%; /* 設置偽元素的邊框為圓形 */
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; /* 應用名為sk-chase-dot-before的動畫，持續(xù)2秒，無限循環(huán)，ease-in-out時間函數(shù)，動畫前后狀態(tài)都保留 */
}
/* 為每個追逐點設置不同的動畫延遲，以創(chuàng)建連續(xù)的動畫效果 */
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
/* ... 其他點的動畫延遲設置類似，逐漸減少以創(chuàng)建追逐效果 */
/* 定義sk-chase動畫的關鍵幀 */
@keyframes sk-chase {
  100% { transform: rotate(360deg); } /* 動畫結束時，元素旋轉360度 */
}
/* 定義sk-chase-dot動畫的關鍵幀 */
@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } /* 動畫的80%至100%時間，元素旋轉360度 */
}
/* 定義sk-chase-dot-before動畫的關鍵幀 */
@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); /* 動畫的50%時間，偽元素縮小到原來的40% */
  } 
  100%, 0% {
    transform: scale(1.0); /* 動畫的開始和結束時，偽元素恢復到原始大小 */
  } 
}

更多實現(xiàn)細節(jié)，請參考源碼。

總結

SpinKit 以其簡潔的設計、多樣的動畫樣式和易于集成的特點，成為優(yōu)化用戶體驗的首選加載動畫庫。無論是在網(wǎng)頁還是在移動應用中，SpinKit 都能夠有效地傳達加載狀態(tài)，減少用戶的等待焦慮，增強應用的專業(yè)感和吸引力。希望本文的分享對你有幫助。

祝好！

引用鏈接

[1] Github Star: 19.3k: https://github.com/tobiasahlin/SpinKit
[2] 官網(wǎng): https://tobiasahlin.com/spinkit/