LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS 載入動畫產生器

站方自行規劃沒找到想要的工具？

在本機設計輕量的 CSS 載入指示器並複製程式碼

透過即時預覽建立純 CSS 載入動畫。調整尺寸、顏色、線條粗細與速度，然後複製 HTML 與 CSS 程式碼片段。不需要 JavaScript，也不需要圖片。

預覽

HTML
<span class="loader" role="status" aria-label="載入中…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

每段程式碼只對 transform 和 opacity 做動畫，並以 prefers-reduced-motion 區塊收尾，讓已在系統中要求減少動態效果的人不必盯著它轉。

不用 JavaScript、不用圖片、不用網頁字型，也沒有任何內容離開你的瀏覽器。

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

載入指示器是少數幾個幾行 CSS 就能完勝一整個函式庫的場合：沒有指令碼要載入，沒有圖片要請求，也沒有什麼需要在你真正等待的東西之前先初始化。這裡的五個樣板——圓環、雙環、圓點、長條與脈動——只對 `transform` 和 `opacity` 做動畫，因此瀏覽器可以把它們交給合成器處理，而不必逐格重新計算版面。每段程式碼都以 `prefers-reduced-motion` 區塊收尾，因為載入動畫屬於裝飾，而已經在系統中要求停止動態效果的人，沒有理由被迫盯著它轉。標記是帶標籤的 `<span role="status">`，這樣螢幕閱讀器會唸出「正在等待」，而不是碰到一個空盒子。

使用方式

  1. 挑選一個樣板，然後設定尺寸、粗細、速度與顏色。
  2. 如果類別名稱可能與你的樣式表衝突，就改掉它。
  3. 把 HTML 與 CSS 複製到你的專案裡。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

這些載入動畫是純 CSS 的嗎？
是的。每一個都是一個 span（圓點與長條樣板會多幾個空的子 span）加上一段 CSS 動畫。沒有 JavaScript，沒有 SVG，沒有圖片，也沒有網頁字型。
執行它們需要 JavaScript 嗎？
不需要。元素一進入文件，動畫就開始了。你只需要用程式碼決定什麼時候顯示、什麼時候隱藏。
可以改速度與顏色嗎？
可以——尺寸、線條粗細、動畫時長、主色與軌道色都是本頁的控制項，而且會直接寫進你複製的那段程式碼裡。
偏好減少動態效果的訪客怎麼辦？
每段產生的程式碼都以 prefers-reduced-motion 媒體查詢收尾，實際上會讓動畫停下來，所以指示器依然會出現，但對在系統層面調低動態效果的人不會旋轉。
程式碼是在本機產生的嗎？
是的。設定、預覽與產生的程式碼片段都留在你的瀏覽器裡，不會上傳任何內容。

回到全部工具