zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS ローディングアニメーションを作成する

CSSのスタイルのみでローディングアニメーションを作成する方法を紹介します。

完成形

以下のようなローディングアニメーションを作成します。

適用しているスタイルを1つづつ解説します。

<style>
.spinner {
  height: 100px;
  width: 100px;
  border: 5px solid #ccc;
  border-top: 5px solid blue;
  display: inline-block;
  border-radius: 100%;
  animation: rotation .5s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
<div class="spinner">
</div>

要素を作成

まずはローディングアニメーションを表示する要素を作成します。

div要素を作成し、display: inline-blockのスタイルを指定します。

display: inline-blockを指定すると、サイズを指定できるようになるので、widthheightを指定します。

また、borderも指定してdiv要素の表示領域を確認できるようにします。

<style>
.spinner {
  height: 100px;
  width: 100px;
  border: 5px solid #ccc;
  display: inline-block;
}
</style>
<div class="spinner">
</div>

円状にする

要素を円状にするため、border-radiusを指定します。

border-radius100%を指定すると、ボーダーの四隅が完全に丸くなり、要素は円状になります。

また、border-topのみ色を変更します。

要素を回転させると、色が変わった部分のみが回転する動作になります。

<style>
.spinner {
  height: 100px;
  width: 100px;
  border: 5px solid #ccc;
  border-top: 5px solid blue;
  display: inline-block;
  border-radius: 100%;
}
</style>
<div class="spinner">
</div>

回転させる

要素を回転させるため、アニメーションを設定します。

rotationという名前で要素を回転させるアニメーションを作成します。

0.5秒でrotationのアニメーションが繰り返し実行されるようにanimationのスタイルを設定します。

<style>
.spinner {
  height: 100px;
  width: 100px;
  border: 5px solid #ccc;
  border-top: 5px solid blue;
  display: inline-block;
  border-radius: 100%;
  animation: rotation .5s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
<div class="spinner">
</div>

以上で、ローディングアニメーションの完成です。

ボーダーの太さや色、アニメーションを変更すれば独自のローディングアニメーションを作成できます。


関連記事