読み込み中にグルグル回るローディングアイコンを用意する時、アニメーションGIF画像などを使うことが多かったが、CSSだけでもローディングアイコンを作ることができたので、そのコードを紹介する。

まずはCodePenで用意したサンプルをご覧いただこう。

See the Pen css-loading-icon by Sakamoto Kousuke (@suckamon) on CodePen.

ちょっとしたCSSのコードだけで、グルグル回るローディングアイコンが再現できているのが分かる。

ポイントは二つ。

まず、border-radius: 50%として円を用意し、border-topに背景色と同色のボーダーを付けることで円の上部一部のみを消しているように見せているところ。

そして、@keyframesで定義した回転アニメーションspinを、animationで実行することでローディングアイコンを再現している。