LOADING.IO - 免費線上 Loading 載入動畫、文字、背景產生器，大量提供各種前端素材免費資源

LOADING.IO 是一個幫助你快速產生 Loading 動畫效果的免費線上工具，LOADING.IO 具有多種選項，讓你客製化一個獨特的 Loading 動畫效果，非常適合前端設計師與網頁設計師來快速實現載入的動態效果。

LOADING.IO 提供的 Loading 效果非常全面，不僅僅能幫你產生常見的頁面轉場 Loading 效果，同時也提供動態 Icon、Preloaders 預載動畫、按鈕動畫、純 CSS 載入動畫…等等，所提供的功能可說是包山包海，對於前端工作者來說，絕對是必收藏的工具網站之一。

網站名稱：loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
網站網址：https://loading.io/

LOADING.IO 簡介與教學

一開始進入 LOADING.IO 的首頁之後，點擊「Get Start」就會下移至 Loading 產生的設置畫面，你當然也可以自己往下拉，這兩者是一樣的。接著就可以開始進行各種 Loading 效果的調整：

LOADING.IO 給予 Loading 動畫效果的調整選項非常多，從顏色、圓角、寬度、高度、數量、半徑、速度、大小…等等。這些設定可以讓你自由去調整，讓你的 Loading 動畫效果絕對是獨一無二的。

而從下方可以看到，LOADING.IO 一開始就提供了不少的免費 Loading Icon 給我們做選擇，你可以從中挑選不同類型的 Loading Icon。

除此之外，在免費 Icon 下方，LOADING.IO 也提供了付費的 Icon 讓你做選擇，雖然是付費的，但每個付費 Loading Icon 的費用僅需 $1.99 美元，相當於 60 台幣左右，實在也是非常便宜划算。因此，如果你比較中意付費的 Loading Icon，當然也可以直接付費購買。

LOADING.IO 提供多種免費/付費 Loading Icon 提供選擇

剛剛提到，LOADING.IO 提供了許多客製化的選項，根據你所選擇的 Loading Icon 不同，其所提供的客製化選項也會有所不一樣：

當你調整好 Loading 的效果之後，LOADING.IO 提供了多種格式讓我們下載，包括了：GIF、SVG、CSS、PNG 格式，而且，你也能直接儲存為你的 Asset，直接提供網址給其他人使用。

在 LOADING.IO 所製作的 Loading 動畫是屬於「Free License」，也就是屬於公共領域（Public Domain）的資源，你可以出於各種目的使用這個資源，且不需要註明出處。

在你下載之前，需要登入 LOADING.IO 的帳號才能進行下載。第一次使用勢必是沒有帳號的，你可以直接在 LOADING.IO 建立一個免費帳號，或直接使用 Google、Facebook 的帳號直接連結登入。

登入後，再次按下載，就會跳出下載視窗。LOADING.IO 會再次提醒你 Loading 素材的許可證規範，點擊「Free Download」就會開使生成你所製作的 Loading Icon：

產生 Loading Icon

Loading Icon 製作完成後，會再跳出下載的視窗，點擊「Download」就會將你做製作的 Loading Icon，以你所選擇的格式下載到本地當中：

下載你所自定義的 Loading Icon

除了 Loading Icon 之外，LOADING.IO 也提供了 CSS Loaders 的程式碼，讓我們可以直接使用 HTML+CSS 的方式，實現 Loading 的動態效果：

LOADING.IO 更多素材功能

LOADING.IO 不僅僅只有免費製作 Loading Icon 動態圖示的功能而已，在 LOADING.IO 網站當中，還提供了「Loader Gallery」、「Animate Icons」、「Vector Icon」、「Loading Text」、「Loading Patterns」、「Loading Backgrounds」、「Loading Bar」…等等，甚至還免費提供了 CSS Loaders 與 JS Loaders 的 Libraries，放在 GitHub 開源給大家使用，非常的佛心。

LOADING.IO – Infinite Palette Generator

其中，我要特別拉出來介紹的其中一項功能，就是 LOADING.IO 的「Infinite Palette Generator」功能。Infinite Palette Generator 相信對於大多數的前端設計師都很需要。它能產生各種配色，協助我們更快、更好的完成色彩美學的工作，是前端設計非常需到的一大功能。