1つのdivとCSSだけでローディングを作る方法 #CSS

背景

シンプルなローディングで良い
メンテナビリティーを確保したい
ローディング要素が負荷にならないようにしたい

→ CSS だけでローディングを作成する

ローディング要素の要件

円状の要素が回転しているもの
画像や JavaScript は使用しない

完成イメージ

実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。

見た目を定義する
回転させる

見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。

<div class="loading"></div>

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

↓

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}

完成デモ

上記をブラッシュアップした完成でもを置いておく。

See the Pen Pure CSS Loading Image by hiro (@hiro0218) on CodePen.

ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。（例: cursor: progress;など）

まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり（修正と書き出し依頼）を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。