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

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

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

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

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

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

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

CSSでの正円について

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

参考サイトなど

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

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

また、コメントは承認制となります。