[CodePen] 彙整 - Progress Bar & Loader

以下內容為個人平日觀看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 」廣告 😄

如果你喜歡這篇文章可以點擊「分享」按鈕,來分享到你的網路社群
(以上文章內容如有謬誤,敬請不吝指教)