.loader {
    width: 70px;
    aspect-ratio: 2;
    background:
        radial-gradient(farthest-side, #000 90%, #0000) 0 0/8px 8px,
        linear-gradient(#fff 0 0) 100% 0/30px 10px,
        linear-gradient(#fff 0 0) 0 100%/30px 10px,
        repeating-linear-gradient(90deg, #fff 0 10px, #0000 0 30px);
    background-repeat: no-repeat;
    animation: l6 2s infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@keyframes l6 {
    0% {
        background-position: left 1px bottom 1px, 100% 0, 0 100%, 0 0;
    }

    12.5% {
        background-position: left 50% bottom 1px, 100% 0, 0 100%, 0 0;
    }

    25% {
        background-position: left 50% top 1px, 100% 0, 0 100%, 0 0;
    }

    37.5% {
        background-position: right 1px top 1px, 100% 0, 0 100%, 0 0;
    }

    50% {
        background-position: right 1px bottom 1px, 0 0, 100% 100%, 0 0;
    }

    62.5% {
        background-position: right 50% bottom 1px, 0 0, 100% 100%, 0 0;
    }

    75% {
        background-position: right 50% top 1px, 0 0, 100% 100%, 0 0;
    }

    87.5% {
        background-position: left 1px top 1px, 0 0, 100% 100%, 0 0;
    }

    100% {
        background-position: left 1px bottom 1px, 100% 0, 0 100%, 0 0;
    }
}

#loader {
    position: fixed;
    background: white;
    z-index: 5;
    height: 100vh;
    width: 100vw;
    transition: transform 2s ease, opacity 0.6s ease;
}

#loader.slide-up {
    transform: translate(0%, -100%);
    opacity: 0;
}

@media (max-width: 768px) {
    .loader {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .loader {
        width: 35px;
    }
}