CSS ローディングアニメーションを作成する
CSSのスタイルのみでローディングアニメーションを作成する方法を紹介します。
完成形
以下のようなローディングアニメーションを作成します。
適用しているスタイルを１つづつ解説します。
<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を指定すると、サイズを指定できるようになるので、widthとheightを指定します。
また、borderも指定してdiv要素の表示領域を確認できるようにします。
<style>
.spinner {
height: 100px;
width: 100px;
border: 5px solid #ccc;
display: inline-block;
}
</style>
<div class="spinner">
</div>円状にする
要素を円状にするため、border-radiusを指定します。
border-radiusに100%を指定すると、ボーダーの四隅が完全に丸くなり、要素は円状になります。
また、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>以上で、ローディングアニメーションの完成です。
ボーダーの太さや色、アニメーションを変更すれば独自のローディングアニメーションを作成できます。