ローディング（左から幕が開く）

デモ

See the Pen loading1 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);
    display: flex;
    align-items: center;
    justify-content: center;
  background: #000
}

.section-title {
    display: flex;
    justify-content: center;
    margin: 5rem 0;
    font-size: 2.5rem;
    position: relative;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
}

.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;
    transition: width .8s ease-in;
}

#load.loaded {
    width: 0%;
}

#load.loaded .loader {
    opacity: 0;
    visibility: hidden;
    user-select: none;
    pointer-events: 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;
}

.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');
})