今回のお題は、

「ローディングアニメーション」です！

ページの読み込み時に読み込み中であることを伝えるローディングアニメーションにも様々な種類のものがあります。

今回は、その中でもシンプルなデザインのものを3種類ほどピックアップしてみました。

早速見ていきましょう！

主なローディングアニメーション

1. 3つの丸が大きくなったり、小さくなったりするアニメーション
2. 5つの丸がジャンプするアニメーション
3. 8本の線が回転してフェードイン・アウトを繰り返すアニメーション

1. 3つの丸が大きくなったり、小さくなったりするアニメーション

非常にシンプルで、読み込み中だということが分かるアニメーションです。

幅や高さもそれほど必要にならないので、様々な場面で使用できます。

2. 5つの丸がジャンプするアニメーション

動きがつくと、少しダイナミックな印象を与えられます。

サンプルでは白色にしましたが、カラフルにするとまた違ったポップな印象を与えることもできると思います。

3. 8本の線が回転してフェードイン・アウトを繰り返すアニメーション

こちらはよくみるローディングアニメーションの1つだと思います。

先ほどまでのものと比べると、やや位置の調整が難しいですが、こちらも場面を問わず扱えるアニメーションだと思います。

どうやって実装しているの？

今回は、「1. 3つの丸が大きくなったり、小さくなったりするアニメーション」のみご紹介します。

/* HTML */
<div class="scale-circle-wrapper">
　<div></div>
  <div></div>
  <div></div>
</div>

/* CSS */
.scale-circle-wrapper{
  display: inline-block;
  padding: 30px;
  margin: 30px 0;
  background-color: #2E2B2B;
  overflow: hidden;
}

.scale-circle-wrapper > div{
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: white;
  animation: loading-scale-circle 1.5s ease 0s infinite normal forwards;
}

.scale-circle-wrapper > div:nth-of-type(2){
  animation: loading-scale-circle 1.5s ease 0.2s infinite normal forwards;
}

.scale-circle-wrapper > div:nth-of-type(3){
  animation: loading-scale-circle 1.5s ease 0.4s infinite normal forwards;
}

@keyframes loading-scale-circle {
  0%{
    transform: scale(0.1);
  }

  100%{
    transform: scale(1);
  }
}

2、3番目のdivにほんの少しanimation-delayを設定することがポイントです。

アニメーション自体は拡大・縮小を指定するだけなので、非常にシンプル！

まとめ

1. 3つの丸が大きくなったり、小さくなったりするアニメーション
2. 5つの丸がジャンプするアニメーション
3. 8本の線が回転してフェードイン・アウトを繰り返すアニメーション

の3つのローディングアニメーションを紹介しました。

ページの読み込みにこのようなアニメーションが入るか、入らないかで印象が変わってきます。

気になったローディングアニメーションをHPに導入してみませんか？

次回は、ホバーアニメーションをご紹介します！