• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
    • SiteGround 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 線上工具 / LOADING.IO – 免費線上 Loading 載入動畫、文字、背景產生器,大量提供各種前端素材免費資源
loading.io - 免費線上 Loading 載入動畫、文字、背景產生器,大量提供各種前端素材免費資源

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

Last Updated on 2019-12-14 By Sliven Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
5 分鐘閱讀

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

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

LOADING.IO 提供多種前端素材功能
LOADING.IO 提供多種前端素材功能
網站名稱:loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
網站網址:https://loading.io/
目錄
  1. 1. LOADING.IO 簡介與教學
    1. 1.1. LOADING.IO 更多素材功能
    2. 1.2. LOADING.IO – Infinite Palette Generator
    3. 1.3. LOADING.IO 價目表
  2. 2. 你可能有興趣
  3. 3. 更多相關文章

LOADING.IO 簡介與教學

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

LOADING.IO 客製化 Loading 動畫效果頁面
LOADING.IO 客製化 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.IO 提供了許多客製化的選項,根據你所選擇的 Loading Icon 不同,其所提供的客製化選項也會有所不一樣:

不同的 Loading Icon 會提供不同的自定義選項
不同的 Loading Icon 會提供不同的自定義選項

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

LOADING.IO 提供多種格式可供下載
LOADING.IO 提供多種格式可供下載

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

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

註冊 LOADING.IO 免費帳號
註冊 LOADING.IO 免費帳號

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

產生 Loading Icon
產生 Loading Icon

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

下載你所自定義的 Loading Icon
下載你所自定義的 Loading Icon

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

透過純 HTML+CSS 也能實現 Loading 動畫效果
透過純 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 所有素材資源製作頁面
LOADING.IO 所有素材資源製作頁面

LOADING.IO – Infinite Palette Generator

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

Infinite Palette Generator 幫助產生無限組合的配色
Infinite Palette Generator 幫助產生無限組合的配色

和一般 Palette Generator 顏色產生器不同的地方在於,LOADING.IO 還有許多條件選項讓我們進行篩選與設定。同時,你還可以根據主題,直接輸入 Keywords 關鍵字讓 Infinite Palette Generator 產生相對應的配色。

舉例來說,直接在 Keywords 中輸入「Ocean」,就會產生以海洋為主題的相關配色:

可輸入 Keywords 產生該主題的相關配色
可輸入 Keywords 產生該主題的相關配色

甚至,你還可以上傳圖片,LOADING.IO 會根據你所上傳圖片的配色,參照出大致的顏色組成,還可以將其分析後,產生出其他相關的配色,相當厲害!

LOADING.IO 價目表

LOADING.IO 目前有三種不同的收費方案模式,分別為:免費方案、月費方案、年費方案。如果你使用的非常的頻繁的話,建議你可以直接購買年費方案,每年只需要 $39.99 美元,相比月費就需要 $9.99 美元來說,單買 4 個月的月費方案,就可以直接購買 1 年的價格了。

LOADING.IO 價目表
LOADING.IO 價目表

不過,一般來說,輕度的使用者使用免費方案就已經綽綽有餘了。在免費方案當中,上限可以儲存 10 個 Asset,也就是產生 Loading 動畫素材後,能夠儲存在雲端當中,以連結方式讓其他人看到你所製作的素材,或是登入自己的帳號後,隨時在各種裝置上下載已製作的素材。

剛剛提到,在 LOADING.IO 網站當中,提供了非常多種前端設計的功能,有一些設計是需要升級至 Pro 方案(月費、年費)才能下載使用的,如果這些付費服務使用很頻繁的話,一次購買一年是比較划算的選擇。

寫到最後,我才發現原來這款「LOADING.IO」是來自台灣的「見聞科技有限公司」所有,實在是於有榮焉。看官網介紹,LOADING.IO 創立於 2014 年,而見聞科技有限公司則是創立於 3 年後的 2017 年。雖然不清楚其中的緣由,但還是非常感謝見聞科技有限公司提供這麼好用的工具與資源。

如果 LOADING.IO 剛好有你所需要的功能,在條件允許的情況下,大家不妨可以多多支持我們本土公司所提供的服務!!

今天帶來 LOADING.IO 這個實用線上工具網站的介紹,如果喜歡的話,歡迎分享給更多人知道!如果你還有更多實用的網站,歡迎在下方留言或 Email 讓我知道,讓我們分享更多的好東西讓大家學習!

你可能有興趣

  • Free Vector Illustrations – 150+ 免費插圖與動態圖片免註冊下載,無須署名且能運用在商業用途使用
  • Pickupimage – 線上免費公眾領域 CC0 照片,提供大量高品質正版圖片與多種尺寸與壓縮比率的免費線上圖庫
  • Whoooa! – 120 個可自定義手繪向量插圖,提供所有設計軟體格式,特惠 30% 折扣限量索取!
  • UI Design Daily – 每日免費提供一個前端 UI 設計資源,CC0 免費開源還可轉售!
  • Koofr – 免費 10 GB 雲端儲存空間,可連結同步 Google Drive、Dropbox 與OneDrive 實現聚合管理功能
  • Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
  • Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
  • CSS Gradient – 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼

更多相關文章

  • Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能
  • Brandbuilder - 線上品牌 Logo 設計工具
  • instant.page - 預先加載超連結頁面,加快網站載入速度並提升頁面轉化率
  • WPX Hosting 主機評價(2021 年 4 月)- CP 值超高虛擬主機推薦,建立快速 WordPress 網站最佳的虛擬主機商
  • 思源黑體 Noto Sans TC - 由 Google 提供的免費線上 Web Font,讓你免費就能擁有好看的中文字型
  • Disable Comments - 允許管理者禁用任何文章類型留言評論的 WordPress 外掛
  • Site Kit by Google - WordPress 外掛整合 Google 產品相關數據
  • Cloudflare Workers™ - 在 Cloudflare Edge 中加入 Script 規則,實現流量過濾與提升網站快取加速能力
  • 什麼是 Waiting TTFB 加載時間過長? 3 步教你如何在 WordPress 當中優化 TTFB 速度
  • ShortPixel - 免費線上圖片壓縮服務,高壓縮比率且圖片不失真,支援 WordPress 外掛自動優化上傳圖片!
  • HostPapa 主機評價(2021 年 4 月)- 70% 折價優惠每月僅需 $3.95 美元,一鍵快速鍵立 WordPress 網站教學
  • Pickupimage - 線上免費公眾領域 CC0 照片,提供大量高品質正版圖片與多種尺寸與壓縮比率的免費線上圖庫

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 線上工具 標籤: Animate Icons, Infinite Palette Generator, Loader Gallery, Loading Backgrounds, Loading Bar, Loading Patterns, Loading Text, loading.io, Vector Icon, 前端素材, 網頁前端

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • Videvo – 線上海量影片素材免費下載,Royalty-Free 免版稅可商用提供各種動態圖形、音樂曲目與音效素材
  • Koofr – 免費 10 GB 雲端儲存空間,可連結同步 Google Drive、Dropbox 與OneDrive 實現聚合管理功能
  • Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • 【WordPress 付費主題免費下載】Bethlehem – Church WordPress Theme
  • 【WordPress 付費主題免費下載】Anada – Data Science & Analytics Saas WordPress Theme
  • 【WordPress 付費主題免費下載】Yoome – Modern WooCommerce WordPress Theme
  • 【WordPress 付費主題免費下載】Cindy – Accessible Local Government WordPress Theme
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Cloudflare Workers™ - 在 Cloudflare Edge 中加入 Script 規則,實現流量過濾與提升網站快取加速能力
  • Fast or Slow - 免費網站測速工具,從世界各地測試你的網站速度
  • WPX Hosting 主機評價(2021 年 4 月)- CP 值超高虛擬主機推薦,建立快速 WordPress 網站最佳的虛擬主機商
  • Pickupimage - 線上免費公眾領域 CC0 照片,提供大量高品質正版圖片與多種尺寸與壓縮比率的免費線上圖庫
  • FastComet 虛擬主機評價(2021 年 4 月)- 70% 折價優惠每月僅需 $2.95 美元,一鍵安裝 WordPress 網站教學
  • ShortPixel - 免費線上圖片壓縮服務,高壓縮比率且圖片不失真,支援 WordPress 外掛自動優化上傳圖片!
  • UpdraftPlus - WordPress 免費自動備份外掛,一鍵輕鬆打包網站與資料庫內容,還可免費上傳至多個雲端儲存空間
  • SiteGround SG Optimizer - 免費又強大的 WordPress 緩存快取外掛,加快網站速度的好幫手
  • DreamHost 主機評價(2021 年 4 月)- 醉心折價優惠每月最低 $2.59 美元,一鍵快速安裝 WordPress 網站心得教學
  • 【WordPress 付費主題免費下載】AppArt - Creative WordPress Theme For Apps Saas

相關文章

  • Dropbox Transfer – 上限 100 MB ~ 100 GB 線上檔案免費快傳,不限對象又安全的傳送大型檔案
  • Tailwind Ink – 線上 AI 顏色調色盤產生器,指定色碼後自動產生 100 個相關的顏色並直接提供色碼
  • 3D Book Image CSS Generator – 免費線上建立 3D 書本展示效果,可設定圖片與連結並產生 CSS 與 HTML 程式碼
  • Optimizilla – 免費線上圖片壓縮服務,一次可同時上傳 20 張圖片並個別進行品質設定
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
  • FlexClip – 完全免費的線上影片編輯製作工具,套入範本三分鐘產出一支精美影片
  • ScreenApp.io – 免費線上螢幕錄製工具,透過瀏覽器即可進行錄製
  • Ivacy VPN – 每月只需 $1,跨區觀看 Netflix 與翻牆的強大 VPN 軟體連線工具服務!
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Pixabay – 免費高清圖片素材線上圖庫,超過 1 百萬個影片、圖片與音樂素材且可作商業用途
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明