円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。
htmlは入れ子になった空のdivタグを3つ用意します。クラス名p-loaderのdivタグはローディング全体（オーバーレイ）、クラス名p-loader-circle-wrapのdivタグはローダーのフェードイン、クラス名p-loader-circleがローダーです。なお、クラス名p-loader-circle-wrapのdivタグはなくても動作します。
<body data-status="loading">
<div class="p-loader">
<div class="p-loader-circle-wrap">
<div class="p-loader-circle"></div>
</div>
</div>bodyタグのdata-status属性がloadingの間はローディングを表示します。ローディング中、bodyタグはoverflow: hidden;を指定してスクロールバーを非表示にします。
ローディング全体（オーバーレイ）はローディング終了時、opacityを1から0へtransitionで変化させます。また、pointer-eventsをautoからnoneへ変化させます。ローディング中はpointer-eventsがnoneだと背面に隠れているコンテンツが選択できてしまいます。ローディング終了後はpointer-eventsがautoだとコンテンツが選択できません。displayプロパティをblockからnoneへ変更することなく、オーバーレイのフェードアウトを実現しています。
ローダーは幅と高さを50pxにしborder-radius: 50%;を指定することで円にしています。borderを半透明の白、border-rightのみ透過度を100%にして、円の一部分が異なる色に見えるようにしています。ローディング中はCSSアニメーションでtransformプロパティのrotateを0から360degへ変化させて回転させます。
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: #3bbbff;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
.p-loader-circle-wrap {
position: relative;
width: 100vw;
height: 100vh;
animation: opacity .3s ease forwards;
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body[data-status="loading"] .p-loader-circle {
animation: loading 1s 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);
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.5);
border-right: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
}JavaScriptのコードです。デモページの読み込みが速いため、setTimeoutで10秒後にローディングを終了しています。
$(window).on('load',function(){
setTimeout(function() {
$('body').attr('data-status', 'loaded');
}, 10000);
});
