【CSS】くるくる(スピナー)をanimationでシンプル・簡単に作成

今回は、ローディング時などに表示する、くるくる(スピナー)をCSSだけで、シンプル・簡単に作成する例です。

CSSで作成するスピナー(くるくる)の例

See the Pen vRKwev by yic666kr (@yic666kr) on CodePen.

スピナーを作成するポイント

今回、作成したスピナーのCSSのポイントは、スピナーとする要素に指定した以下のプロパティの値となります。

  • width・heightプロパティを同じ長さの値とする。
  • borderプロパティを指定し、要素の1辺のみ違う色にする。
  • border-radiusプロパティを50%とする。
  • animationプロパティで@keyframesを設定し、transformプロパティで要素を回転させる。

また、スピナーの大きさはwidth・heightプロパティで指定しています。

今回のソースコードでは、ベンダープレフィックスは指定していませんが、指定する場合には、以下のリンク先を参考にしてみてください。

animation-CSS3リファレンス

今回の例で使用したCSSで正円を作成する方法については、以下のリンク先を参考にしてみてください。

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。