くるくる回るローディングのCSSアニメーション7選
ローディングでサイト離脱を防ごう！
WEBサイトを開いたときに表示されるローディングアニメーションですが、使っていますか？
ローディングはサイトを開いたときに表示されるまでの待機時間のことで、この待機時間が長いほど訪問者が離脱しやすいと言われています。
この待機時間を退屈させないためにアニメーションを設置します。
今回はくるくる回転するようなローディングアニメーションを7つご紹介したいと思います。
CSSアニメーションのみで作成しているので、初心者の方でも簡単に取り入れることができます。
これがあるだけで訪問者数を増やすことができるので、活用していきましょう♪
円状に回るローディングアニメーション part.1
円のなかで一部がくるくると回るようなアニメーションです。
よく見るデザインの一つで、マウスのローディングに使われることも多いです。
どんなサイトでも邪魔しないサインプルな動きなので、迷ったらとりあえずこれを使いましょう。
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.
二重線が回るローディングアニメーション
大きさの違う二重の円が回るような不思議な動きのアニメーションです。
大きさ違いの円を同時に回転させているだけなのに、複雑な動きのようにみえます。
ポップになりすぎず、複雑な印象もあるので、これもいろんなジャンルのサイトに使えそうです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
円状に回るローディングアニメーション part.2
円状に回るアニメーションの応用編です。
円の終わりの部分が透過グラデーションになっているので、よりスタイリッシュな印象です。
図形の境界線がなくなるだけで、優しいイメージになりますね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
4分割で回るローディングアニメーション
4分割の範囲が順番に色が変わるアニメーションです。
見かけることが少ないこのデザインですが、パタパタと色が回転していくのでサイトも楽しい雰囲気になります。
難しそうな実装ですが、タイミングをずらして表示させているだけなので初心者の方にもおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
大小の点が回るローディングアニメーション
大きさの異なる丸がくるくる回ることで立体的に見せることができるアニメーションです。
このデザインも珍しいですが、空間を感じさせるようなポップな動きです。
これを設置するだけで、サイトが表示されるのも楽しみになりそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
まとめ
すぐに取り入れやすい回るローディングCSSアニメーションをご紹介しました。
円を使ったものでも、こんなにも多くのバリエーションをつくることができます。
ローディングは退屈な時間ですが、面白い動きを加えることで楽しい時間に変えることができます。
今回紹介した黒とオレンジのデザインをそのまま利用するのもいいですが、サイトに合わせて色や丸の数を変えてオリジナルのデザインを作ってみてください。
次回は丸を使った回る以外の動きのアニメーションをご紹介したいと思います。
最後までご覧いただきありがとうございました☆彡