【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プロパティに指定できる値は他にもあります。詳しくは以下のリンク先を参考にしてみてください。