デモページはこちら

円を一周する動作のsvgロードアニメーションを実装します。画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded（imagesloaded.pkgd.js）を利用しています。

svgタグで表示エリアをwidth="90"、height="90"で設定します。また描画エリアをviewBox="0 0 90 90"（X座標：0、Y座標：0、width：90px、height：90px）で設定して、表示エリアとぴったり重ねます。

円はcircleタグではなくrectタグで記述します。y="5"、x="5"の位置にwidth="80"、height="80"の正方形を角丸rx="40"、ry="40"で設定して円にします。rectタグは正方形の一辺の半分以上の数値をrxとry両方に設定すれば円になります。

同じ大きさのrectタグを2つ重ね、クラス名を設定します。1つ目のクラス名p-loader-circle-parts-bgが背景用、2つ目のクラス名p-loader-circle-partsがロードアニメーション用です。

<svg class="p-loader-circle js-loader-circle" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
	<rect class="p-loader-circle-parts-bg" y="5" x="5" width="80" height="80" rx="40" ry="40"></rect>
	<rect class="p-loader-circle-parts js-loader-circle-parts" y="5" x="5" width="80" height="80" rx="40" ry="40"></rect>
</svg>

それぞれのrectタグの塗り、線の色、線の太さ、破線の間隔、破線の開始位置はCSSで記述します。背景用の破線の間隔は500で実際の線より長く、破線の開始位置は0のため見た目は通常の円で描画されます。ロードアニメーション用の破線の間隔は同様に500ですが、破線の開始位置は500のため見た目は非表示になります。このロードアニメーション用の破線の開始位置を、画像の読み込みに合わせてJavaScriptで500から0へ変化させて円を一周する動作を実現します。

.p-loader-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	transform-origin: top left;
}
.p-loader-circle-parts {
	transition: stroke-dashoffset 10s cubic-bezier(0.075, 0.82, 0.165, 1),
	transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
	opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	fill: transparent;
	stroke: #fff;
	stroke-width: 2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
}
.p-loader-circle-parts-bg {
	transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
	opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	fill: transparent;
	stroke: #70709c;
	stroke-width: 2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 0;
}