【CSS】くるくる(スピナー)をシンプル・簡単に作成|animationプロパティ

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

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

以下、ソースコードの例となります。

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

CSSの説明

上記CSSのポイントとなる箇所は、スピナーとする要素に指定した以下のプロパティとなります。

  • width・heightプロパティを同じ長さの値とする。
  • borderプロパティを指定し、要素の1辺のみ違う色にする。
  • border-radiusプロパティを50%とする。
  • animationプロパティで要素を回転させるアニメーションを指定。

animationプロパティについて

animationプロパティで指定した値は順に以下となります。

  • @keyframesと紐付ける任意のアニメーション名
  • アニメーション時間
  • アニメーション回数を指定する値
  • アニメーションのイージング(加速・減速)を指定する値

@keyframesで定義したキーフレームについて

@keyframesではキーフレームアニメーションを定義できます。

今回の例で定義したキーフレームでは、次のとおり要素の角度を指定し、要素を回転させています。

  • アニメーション開始100%の時点で、transformプロパティのrotate()で角度を360度に指定

CSSでの正円について

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

まとめ

以上がCSSでスピナーを作成する例となります。

また、animationプロパティに指定できる値は他にもあります。詳しくは以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。