かっこいいローディングcssを集めてみた

ローディングのぐるぐるアイコン、一昔前はアニメgifでやるのが一般的だったけど
昨今はcssでやるところも増えてきてます。
そんなわけで、CodePenから適当にかっこいいローディングcssを集めてみました。



Loading


http://codepen.io/dissimulate/pen/vlfyA

See the Pen Loading by dissimulate (@dissimulate) on CodePen.




CSS loading animation


http://codepen.io/patrikhjelm/pen/hItqn

See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.




CSS3 Loading Animation


http://codepen.io/MyXoToD/pen/Djnbq

See the Pen CSS3 Loading Animation by Max (@MyXoToD) on CodePen.




CSS3 loading animations


http://codepen.io/xixao/pen/jvxFc

See the Pen CSS3 loading animations by Steve Melcher (@xixao) on CodePen.




loading


http://codepen.io/colortom/pen/ciGLC

See the Pen loading by colortom (@colortom) on CodePen.




Fluid Drop Loading


http://codepen.io/ciprianionescu/pen/myLjVw

See the Pen Fluid Drop Loading by Ciprian Ionescu (@ciprianionescu) on CodePen.




CSS 3 Loading - Circle Rotation


http://codepen.io/trungk18/pen/wWoLYR

See the Pen CSS 3 Loading - Circle Rotation by Vo Tuan Trung (@trungk18) on CodePen.




Compose loading animation


http://codepen.io/imathis/pen/ZYEWrw

See the Pen Compose loading animation by Brandon Mathis (@imathis) on CodePen.




まとめ


まだまだいっぱいあるのだけどとりあえずこの辺で。
見ていて飽きない、離脱しないようなローディングを作りたいですね。