以下內容為個人平日觀看CodePen上的作品
留存一些覺得不錯的網頁素材經過整理後而成
文章內容將不定期更新
本篇彙整關於「Progress Bar & Loader」的網頁素材
★圓形
Color Blend Loader Animation (各種不同顏色混合變換的Loader)
http://codepen.io/rydaly/pen/PGpRzy
CSS Animation: Circle loader with checkmark completed state
http://codepen.io/scottloway/pen/zqoLyQ
CSS-Only Round Progress Bar (可自行手動調整的圓形進度條)
http://codepen.io/gabriellewee/pen/begaYb
Yet another pseudo element loader (圓形進度條)
http://codepen.io/jh3y/pen/JKdNgx
Button Loading Experiment (按下按鈕後會顯示圓形的載入進度條)
http://codepen.io/hugobaeta/pen/KrmoKX
angular | material circular progress fab button (按下按鈕後會開始跑圓形進度條)
http://codepen.io/mindstorm/pen/ezJZzJ
Loading Petal Spinner
http://codepen.io/Trinca/pen/WGvQPN
★長條型
Loading (會有數字顯示目前的進度)
http://codepen.io/quilljou/pen/xOojNg
css only test (長條型進度條)
http://codepen.io/jonnyb1250/pen/qNbZOm
Pure CSS color-changing progress bar (可自行手動調整的長條型進度條)
https://codepen.io/ines/pen/oLGgLN
Delayed Animation Iteration (在windows系統上安裝程式常看見的進度條)
http://codepen.io/timothyasp/pen/HlzGu
★方形
spinner
http://codepen.io/_massimo/pen/LbMNQw
Cube Flipping Loader (方塊型loader)
https://codepen.io/nikhil8krishnan/pen/dMEzGx
CSS Animation With Random Colors (可運用於loading效果)
http://codepen.io/sfi0zy/pen/RRgWxA
★3D
Minecraft Loader (Minecraft 的 3D loader)
http://codepen.io/trumanheberle/pen/EyoRAj
★純數字
Simple jquery loader (從0%跑到100%)
http://codepen.io/rikato/pen/rLEgkj
★Else
GAME BOY COLOR LOADER (以Gameboy遊戲機作為loader)
https://codepen.io/yoann-b/pen/jyjeKV
CSS Preloaders (以Pendulum balls的動畫作為loading畫面)
https://codepen.io/tadaima/pen/jBNMoR
Glowworm Loader (下方有個bar，可自由調整中央loader圖形的大小)
http://codepen.io/kmck/pen/vXRONm
Google Chrome. Feed Me Memory (chrome吃記憶體的動畫)
http://codepen.io/lmenus/pen/gwAVmZ
Preloader
http://codepen.io/RaulC/pen/KgWkjo
Loader SCSS (有一個圓點不停上下跳動的loading畫面)
http://codepen.io/uhanov/pen/xEqWaP
Fallout 4 loading
http://codepen.io/nickylew/pen/BzGPWZ
ShortSnippets.css (共有10幾種不同的loader)
http://codepen.io/Mahmoud-Zakaria/pen/zKLrkY
Pizza CSS loader (Pizza造型的loader)
http://codepen.io/sidthesloth92/pen/gwdmNV
CSS3 Animation Loader (如琴鍵般的loader，該作者只用JavaScript寫成此一程式)
https://codepen.io/gregtatum/pen/rMERWX?editors=1010
Daily Loader 1/365
http://codepen.io/yesvin/pen/pEzBkk
oLAEBq
http://codepen.io/kriswilliams/pen/oLAEBq
Ball Loader (有一顆足球在原地彈跳的載入畫面)
http://codepen.io/dmsanchez86/pen/OXjROz
Egg to chick loader (Loading動畫 - 小雞破蛋而出)
http://codepen.io/timelessagain/pen/groAvX
Prelodr (preloader)
http://codepen.io/joseluisq/pen/rVeyXY
Single element pure CSS LoadMan 😎😄🎮 (小精靈動畫)
http://codepen.io/jh3y/pen/VKjvbw
CSS Loaders (總共有19種各式各樣的loader)
http://codepen.io/vank0/pen/mARwLg
Css3 Spinners (有4個小東西可應用於loading)
http://codepen.io/huckbit/pen/RRmyzY
如果這篇文章有幫助到你，想支持一下作者可以幫忙點擊側欄的「 Goolgle AdSense 」廣告 😄
如果你喜歡這篇文章可以點擊「分享」按鈕，來分享到你的網路社群
(以上文章內容如有謬誤，敬請不吝指教)