くるくる回るローディングの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アニメーションをご紹介しました。
ローディングは退屈な時間なので面白い動きを作ることで楽しい時間に変えることができます。
今回紹介したデザインもそのまま利用するのもいいですが、サイトに合わせて色や丸の数を変えてオリジナルのデザインを作ってみてください。
次回は丸を使った回る以外の動きのアニメーションをご紹介します。
最後までご覧いただきありがとうございました。