動きがおもしろいローディングのCSSアニメーション 8選
ローディングは楽しい時間！？
前回はくるくる回転するようなローディングアニメーションをご紹介しました。
どれか一つでも使っていだけたら嬉しいです^^
よく読まれている記事
今回はローディングで見たことないような面白い動きをしているものを集めてみました！
ローディングは退屈な時間を楽しい時間に変えてくれるようなアニメーションです。
コピペで簡単に実装できるので、どんどん面白い動きを作ってみましょう！
4つの線が円状に回るローディングアニメーション
4本の棒が円状にズレて回るような面白いアニメーションです。
棒が回る時間をそれぞズラすことで、風車のように回すことができます。
棒の色を違う色にすると、また違ったニュアンスで楽しめそうです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
横スクロールバーのローディングアニメーション
スクロールバーのように横にスライドするようなアニメーションです。
横にすることで、よりローディングっぽくなりますね。
WEB関係のブログに使ってみても相性がよさそうです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
上下にずれるローディングアニメーション
角丸の四角が5つに分かれて、上下にズレるようなアニメーションです。
マジックでよく見るような体が切れてズレるのに似てますね。
海外のアンケートサイトのローでイングに使われていることもあります。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ボールが跳ねるローディングアニメーション
ボールが床の上でボヨンボヨンとバウンドするようなアニメーションです。
可愛い動きがクセになって、ずっと見てしまいますね。
ゲーム関連やアプリのローディングにおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
回転しながら大きさが変わるローディングアニメーション
２つのおうぎ形がくるくる回りながらサイズも変化するアニメーションです。
小さくなった時に遠近感があるように、少しぼかしも入っています。
他のサイトと差別化したいときにぴったりですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
時計の針が高速回転するローディングアニメーション
時計の針がぐるぐると高速で回るアニメーションです。
表示されるまでの時間の経過を表現していてとても分かりやすいデザインですね。
教育関係のWEBサイトに設置すると楽しい雰囲気が表現できます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
渦のように回るローディングアニメーション
2つの円がちがう軌道で回るような不思議なアニメーションです。
つながっているようにも見えますが、それぞれの円が独立して回転しています。
太鼓の模様のようにも見えるので、アジアに関連するサイトにおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
四角がずれて回るローディングアニメーション
2つの大きさの異なる四角が回るようなアニメーションです。
ずっと見ていると目の錯覚で、反対に回転しているように見えるデザインです。
目をとめてしまうような動きなので、一度使ってみたいですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は普段はあまり見ないような面白い動きのローディングアニメーションをご紹介しました。
時間の経過を表現するような動きは分かりやすくてとてもいいなと思いました。
回転速度や色を調整するだけで、オリジナルのアニメーションを作ることができます。
アニメーションを極めているコーダーは意外にも少ないので、ここで一緒に覚えていきましょう♪
次回は「loading」の文字を使ったアニメーションをご紹介しようと思います。
最後までご覧いただきありがとうございました☆彡