ローディングスピナー2
常時CSSのみアイコン
ローディング中などに表示されるサークルが伸びたり縮んだりしながらクルクル回るアイコンです。
実装のポイント
3つのアニメーションを組み合わせています。1つはパスアニメーション、1つはパスのオフセット、そして全体の回転アニメーションです。パスアニメーションは起点から伸びたり縮んだりするだけですが、オフセットのアニメーションと組み合わせることで、伸び縮みが追いかけっこするようになります。それだけだと滑らかなうごきでないので全体を回転させて回転中の追いかけっこになります。
追いかけっこ具合はイージングのよって結構変わってきます。個人的にはcubic-bezier(0.7, 0.1, 0.3, 0.9)がベストでした。
またパスの長さに600 128という数値が出てきていますが、728が円周長になります。この値は直径×3.14で予め測っている必要があります。パスの長さの取得方法はテキストのアウトラインが浮かび上がるアニメーションにて解説しています。
コード例
HTML
<svg
xmlns="http://www.w3.org/2000/svg"
width="256"
height="256"
viewBox="0 0 256 256"
fill="none"
class="loadingSpinner"
>
<path
d="M128 12C192.065 12 244 63.935 244 128C244 192.065 192.065 244 128 244C63.935 244 12 192.065 12 128C12 63.935 63.935 12 128 12Z"
stroke="black"
stroke-width="24"
stroke-linecap="round"
class="loadingPath"
/>
</svg>
CSS
.loadingSpinner {
animation-name: rotation;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.loadingPath {
animation-name: pathAnimation, offsetAnimation;
animation-duration: 2.7s;
animation-timing-function: cubic-bezier(0.7, 0.1, 0.3, 0.9);
animation-iteration-count: infinite;
}
@keyframes pathAnimation {
0% {
stroke-dasharray: 128 600;
}
50% {
stroke-dasharray: 600 128;
}
100% {
stroke-dasharray: 128 600;
}
}
@keyframes offsetAnimation {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: -162;
}
100% {
stroke-dashoffset: -728;
}
}
@keyframes rotation {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
