CSSの疑似クラスでローディングアニメーションを作る

CSSの疑似クラスを利用した簡易的なローディングアニメーションの作り方を紹介します。単純に正円をデザインして動きをつけるだけの簡単な実装方法となっています。

ローディングアニメーションの実装方法

まずは、ローディングの土台をHTMLでマークアップしておきます。

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

次に、CSSでローディングとなる要素をデザインしていきます。

span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #cacaca;
  border-radius: 50%;
  animation: 1.2s load infinite;
}

丸い円がデザインできたら、疑似クラスを使ってアニメーションさせていきます。

span:nth-child(1) {animation-delay: 0.1s;}
span:nth-child(2) {animation-delay: 0.2s;}
span:nth-child(3) {animation-delay: 0.3s;}
span:nth-child(4) {animation-delay: 0.4s;}
span:nth-child(5) {animation-delay: 0.5s;}

@keyframes load {
  0% {
  opacity: 0;
  transform: scale(0);
  }
  100% {
  opacity: 1;
  transform: scale(1);
  }
}

「animation-delay」を使って、ローディング要素1つ1つのアニメーション開始時間を0.1秒ずつ遅らせています。それを1.2秒かけてアニメーションさせて、「infinite」を指定して無限に繰り返すようにしています。あとは、「keyframes」を使って、opacityプロパティで不透明度、transformプロパティの「scale()」で要素のサイズを調整して左から右へ流れるような動きを表現すれば完成です。