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

Author:
loading

ローディングのぐるぐるアイコン、一昔前はアニメ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.

まとめ

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

Share on Facebook
Pocket