デモ
See the Pen loading3 by logsuke (@design-list) on CodePen.
コード
<!-- loading -->
<div id="load">
<div class="loader"></div>
</div>
<header class="header" id="header">
<nav class="nav">
<a href="#" class="logo">
<svg viewBox="0 0 496 512" width="100" title="meh-rolling-eyes">
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM88 224c0-24.3 13.7-45.2 33.6-56-.7 2.6-1.6 5.2-1.6 8 0 17.7 14.3 32 32 32s32-14.3 32-32c0-2.8-.9-5.4-1.6-8 19.9 10.8 33.6 31.7 33.6 56 0 35.3-28.7 64-64 64s-64-28.7-64-64zm224 176H184c-21.2 0-21.2-32 0-32h128c21.2 0 21.2 32 0 32zm32-112c-35.3 0-64-28.7-64-64 0-24.3 13.7-45.2 33.6-56-.7 2.6-1.6 5.2-1.6 8 0 17.7 14.3 32 32 32s32-14.3 32-32c0-2.8-.9-5.4-1.6-8 19.9 10.8 33.6 31.7 33.6 56 0 35.3-28.7 64-64 64z" />
</svg>
logo
</a>
<div class="nav-menu" id="navMenu">
<ul class="nav-links">
<li><a href="#section1" class="nav-link">Section1</a></li>
<li><a href="#section2" class="nav-link">Section2</a></li>
<li><a href="#section3" class="nav-link">Section3</a></li>
<li><a href="#section4" class="nav-link">Section4</a></li>
</ul>
</div>
<div class="nav-toggle" id="navToggle">
<i id="navIcon" class='bx bx-menu'></i>
</div>
</nav>
</header>
<main>
<section id="section1" class="section">
<div class="section-title">
<h2>section</h2>
</div>
</section>
<section class="section">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yV3LwbO3PPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/yV3LwbO3PPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/yV3LwbO3PPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/yV3LwbO3PPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</main>/*=== Base ===*/
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
--bg-color: rgb(240, 240, 240);
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* header */
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: var(--bg-color);
}
.nav svg {
width: 25px;
padding: 2px;
margin-right: 5px;
}
/* nav */
.nav {
width: 100%;
max-width: var(--max-width);
height: var(--nav-height);
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0 3rem;
}
.logo,
.nav-toggle {
color: var(--text-color);
cursor: pointer;
}
.logo {
font-weight: bold;
font-size: 2rem;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
.nav-toggle {
font-size: 3rem;
display: flex;
align-items: center;
z-index: 200;
display: none;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}
.nav-links a {
color: var(--text-color);
}
/*スマホサイズナビゲーションバー*/
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
top: 0;
right: -50%;
background: var(--bg-color);
box-shadow: var(--shadow);
width: 50%;
height: 100vh;
padding-top: var(--nav-height);
transition: transform .5s ease-in-out;
z-index: 120;
}
.nav-menu.toggle {
transform: translateX(-100%);
}
.nav-toggle {
display: block;
}
.nav-links {
flex-direction: column;
}
.nav-links li {
height: var(--nav-height);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
/*=== section ===*/
.section {
min-height: calc(100vh - var(--nav-height));
padding-top: var(--nav-height);
background: #000;
}
.section-title {
display: flex;
justify-content: center;
margin: 5rem 0;
font-size: 2.5rem;
position: relative;
}
.section-title h2 {
position: relative;
font-size: 2.5rem;
}
/* loading */
#load {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
clip-path: circle(200% at 50% 50%);
transition: clip-path .4s;
}
#load.loaded {
clip-path: circle(0% at 50% 50%);
}
#load.loaded .loader {
opacity: 0;
visibility: hidden;
user-select: none;
pointer-events: none;
}
#load.hidden {
display: none;
}
.loader {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
animation: animate 2s linear infinite;
z-index: 1
}
.loader::before {
content: '';
position: absolute;
inset: 8px;
border-radius: 50%;
background: #fff;
z-index: 100;
}
.loader::after {
content: '';
position: absolute;
inset: 0px;
border-radius: 50%;
background: conic-gradient(#fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
filter: blur(30px);
}
@keyframes animate {
0% {
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
iframe {
visibility: hidden;
user-select: none;
pointer-events: none;
}
// loading
window.addEventListener('load', function () {
const load = document.getElementById('load');
load.classList.add('loaded');
setTimeout(function () {
load.classList.add('hidden');
}, 400);
});
