グラデーションの線を回転する動作のsvgロードアニメーションを、CSSアニメーションで実装します。
svgタグで表示エリアをwidth="60"、height="60"で設定します。線が回転するエリアになります。描画エリアはviewBox="0 0 38 38"（X座標：0、Y座標：0、width：38px、height：38px）で設定します。円の4分の1＋余白を描画したエリアです。
グラデーションはdefs内にlinearGradientで設定し、id="a"を指定しておきます。pathのstrokeでurl(#a)のようにlinearGradientのidを指定すると線にグラデーションが適用されます。
circleはr="1"（半径1px）で設定し、pathにつなげて丸みを持たせています。
<body data-status="loading">
<div class="p-loader">
<svg class="p-loader-circle" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 38 38">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#3bbbff" stop-opacity="0" offset="0%"/>
<stop stop-color="#3bbbff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#3bbbff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"></path>
<circle fill="#3bbbff" cx="36" cy="18" r="1"></circle>
</g>
</g>
</svg>
</div>グラデーションの線を回転する動作はCSSで記述しています。bodyタグのdata-status属性がloadingの間はローディングを表示します。svgはCSSアニメーションでtransformプロパティのrotateを0から360degへ変化させて回転させます。bodyタグはoverflow: hidden;を指定してスクロールバーを非表示にします。
ローディング終了時は、オーバーレイをopacityを1から0へtransitionで変化させます。また、pointer-eventsをautoからnoneへ変化させます。ローディング中はpointer-eventsがnoneだと背面に隠れているコンテンツが選択できてしまいます。ローディング終了後はpointer-eventsがautoだとコンテンツが選択できません。displayプロパティをblockからnoneへ変更することなく、オーバーレイのフェードアウトを実現しています。
body[data-status="loading"] {
overflow: hidden;
}
body[data-status="loading"] .p-loader {
pointer-events: auto;
opacity: 1;
}
.p-loader {
position: fixed;
z-index: 10000;
width: 100vw;
height: 100vh;
background: #fff;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
body[data-status="loading"] .p-loader-circle {
animation: loading .6s linear infinite;
}
@keyframes loading {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.p-loader-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}JavaScriptのコードです。デモページの読み込みが速いため、setTimeoutで10秒後にローディングを終了しています。
$(window).on('load',function(){
setTimeout(function() {
$('body').attr('data-status', 'loaded');
}, 10000);
});
