Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示,UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖,Loaders 也是一個 React.js 套件資料庫,打開網站就能在線上直接預覽這些很眼熟的動畫圖,對於要取用拿去開發專案來說非常有用,也不用上網到處尋找動態圖,Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

依照說明,Loaders 有 24 種獨特、有趣且適用於各種情境的動態載入圖,使用者可依照專案進行各種自訂,像是尺寸大小、顏色、線寬和速度,圖示部分非常輕量化,單一檔案在壓縮後小於 1 kb,而且沒有任何 GIF 圖檔,完全使用現代化 CSS 和 SVG 建構。

Loaders
https://uiball.com/loaders

使用教學

STEP 1

打開 Loaders 網站會看到 GitHub 和 npm 鏈結,往下捲動會有以 npm 新增、匯入套件的指令,繼續往下拖曳就會看到這些讀取中的動態圖示。

Loaders

STEP 2

有些讀取中的動態圖看起來非常熟悉,也有一些很引人注目、很可愛很特別,從右上角切換不同檢視模式,因為數量不是太多,直接瀏覽應該就可以了。

那麼大家也或許可以猜到動態圖的功能吧?為了讓使用者有更好的使用體驗,同時在等待時不會那麼無聊(提醒使用者真的在載入中,不要隨意跳離此畫面),適當使用類似的過場動畫有助於讓使用者的感受較好,也有一種更為流暢快速的感覺。

Loaders

STEP 3

點選圖示圖案後會有更大的預覽圖,點選左上角「Source」顯示原始碼,Loaders 會有 React 是用的語法,或是 HTML、CSS 樣式表。

Loaders

點選後就會快速複製到剪貼簿。

Loaders

值得一試的三個理由:

  1. Loaders 收錄超過 24 種獨特、可自訂且輕量化的動態載入圖示
  2. 自訂圖示的尺寸大小、顏色、線寬和速度,單一檔案壓縮後小於 1 kb
  3. 網站提供 React、HTML 和 CSS 程式碼快速複製
分享本文