ページ読み込み時ローディング表示CSSです。
余分なタグを増やしたくなかったので、bodyの擬似要素を使ってページを覆い隠しています。
ローディングの表示/非表示はjsでclassを操作して対応ます。
jsでページ読み込み時にis-loadingクラスをaddClassする処理では一瞬コンテンツが見えてしまうため、あらかじめクラスを付けてあります。また、javascript無効時の対策としてnoscriptタグ内にローディング表示を無効にするcssを入れています。
※下記コードはレスポンシブで画面幅768px以上の場合はローディング画面を表示します。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
/* reset */
* {
font-size: inherit;
line-height: inherit;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.5;
color: #fff;
background: #000;
}
/* page loading(pc時) */
@media screen and (min-width: 768px) {
body.is-loading {
position: relative;
}
body.is-loading::before,
body.is-loading::after {
position: fixed;
z-index: 9999;
display: block;
opacity: 1;
content:"";
}
body.is-loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100vh;
background: #fff;
}
body.is-loading::after {
top: 50%;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border: 4px solid #000;
border-left-color: transparent;
-webkit-animation: isLoading 1s infinite linear;
animation: isLoading 1s infinite linear;
}
body.is-loading.is-loading-fadeout::before {
-webkit-animation: isLoadingFadeout 0.5s linear forwards;
animation: isLoadingFadeout 0.5s linear 0s forwards;
}
body.is-loading.is-loading-fadeout::after {
-webkit-animation: isLoadingFadeout 0.5s linear forwards, isLoading 1s infinite linear;
animation: isLoadingFadeout 0.5s linear 0s forwards, isLoading 1s infinite linear;
}
}
@-webkit-keyframes isLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes isLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes isLoadingFadeout {
from { opacity: 1;}
to { opacity: 0; }
}
@keyframes isLoadingFadeout {
from { opacity: 1;}
to { opacity: 0; }
}
</style>
<noscript><style media="screen and (min-width:768px)">body.is-loading::before,body.is-loading::after{content: none;}</style></noscript>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
'use strict';
$(function() {
if(window.matchMedia('(min-width: 768px)').matches) {
setTimeout(function() { // 何かしらの処理完了後にローディング画面をフェードアウト
$('body').addClass('is-loading-fadeout');
}, 1000);
setTimeout(function() { // フェードアウト完了後、ローディング要素を無くす
$('body').removeClass('is-loading is-loading-fadeout');
}, 3000);
}
});
</script>
</head>
<body class="is-loading">
<p>雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭ノ小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ</p>
</body>
</html>
以上、ありがとうございました。