<!DOCTYPE html>
<html lang="ja">
<head>
<title>ローディング処理</title>
<style type="text/css">
/* ブラウザ初期化 */
* {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}
.loading {
position: fixed;
z-index: 1000; /* ← z-indexはサイト内で一番大きくする */
width: 100%;
height: 100vh;
top: 0;
/* margin: 0;
padding: 0; */
background: #333333;
}
.loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity 500ms;
}
.loading .circle {
display: block;
position: relative;
top: calc( 50% - 20px );
width: 40px;
height: 40px;
margin: 0 auto;
border: 7px solid #444444;
border-top: 7px solid #5ae1e5;
border-radius: 50px;
animation: loading 700ms linear 0ms infinite normal both;
}
@keyframes loading {
0% { transform: rotate( 0deg ); }
100% { transform: rotate( 360deg ); }
}
</style>
</head>
<body>
<section>
<h2>ローディング処理です</h2>
</section>
<!-- HTML -->
<div class="loading">
<span class="circle"></span>
</div>
<script>
const loading = document.querySelector( '.loading' );
window.addEventListener( 'load', () => {
loading.classList.add( 'hide' );
}, false );
</script>
</body>
</html>
未分類