<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "utf-8";
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#333;
text-align:center;
color:#fff;
}
/* Loading画像中央配置 */
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定 */
#splash_logo img {
width: 50vw;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:20s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(5vh);
}
to {
opacity: 1;
transform: translateY(-20vh);
}
}
/*========= レイアウトのためのCSS ===============*/
#container{
width:100%;
height: 100vh;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
a{
color: #333;
}
a:hover{
text-decoration: none;
}</style>
</head>
<body>
<div id="splash">
<div id="splash_logo">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/db-5w5hsqpe-loading.svg" alt="" class="fadeUp">
</div>
</div>
<main>
<div id="container">
<p>ローディング後、この画面が見えます。</p>
<!--/container-->
</div>
</main>
<!--==============JQuery読み込み===============-->
<script>//logoの表示
$(window).on("load", function () {
$("#splash").delay(3000).fadeOut("slow"); //ローディング画面を3秒（3000ms）待機してからフェードアウト
$("#splash_logo").delay(5000).fadeOut("slow"); //ロゴを5秒（5000ms）待機してからフェードアウト
});
//# sourceURL=pen.js</script>
</body>
</html>