Preloader

Pré-Carregador de Página

Função PHP

function preloader($time = 2400) {
    echo '<div class="loader">
        <div class="loading"></div>
        <div data-window="left"></div>
        <div data-window="right"></div>
    </div>
    <script>
        setTimeout(function() {
            document.body.classList.add("loaded");
        }, '.$time.');
    </script>';
}

A chamada para a função pode ser em qualquer lugar da página

.loader {
    --loaderWindow__background: #08111C;
    --loadingSize: 210px; /* width e height loading progress */
    --loadingCenter: -105px; /* metade de width e height */
    --loading__border-width: 4px; /* loading, loading::before, loading::after */
    --loading1__border-color: #1C3C63; /* loading */
    --loading2__border-color: #163050; /* loading::before */
    --loading3__border-color: #11243C; /* loading::after */
    --loadingSpace: 12px; /* espaço entre loading, loading::before, loading::after */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
}
.loading {
    position: relative;
    top: 50%;
    left: 50%;
    width: var(--loadingSize);
    height: var(--loadingSize);
    margin-top: var(--loadingCenter);
    margin-left: var(--loadingCenter);
    border-radius: 50%;
    border: var(--loading__border-width) solid transparent;
    border-top-color: var(--loading1__border-color);
    border-left-color: var(--loading1__border-color);
    animation: progress_circle 2s linear infinite;
    z-index: 1011;
}
.loading:before, .loading:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: var(--loading__border-width) solid transparent;
}
.loading:before {
    inset: calc( (var(--loadingSpace) * 2) / 2.5 );
    border-top-color: var(--loading2__border-color);
    border-left-color: var(--loading2__border-color);
    animation: progress_circle 3s linear infinite;
}
.loading:after {
    inset: calc(var(--loadingSpace) * 2);
    border-top-color: var(--loading3__border-color);
    border-left-color: var(--loading3__border-color);
    animation: progress_circle 1.5s linear infinite;
}
.loader [data-window=left], .loader [data-window=right] {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--loaderWindow__background);
    z-index: 1009;
    transform: translateX(0);
}
.loader [data-window=left] { left: 0 }
.loader [data-window=right] { right: 0 }

/* remove animacao */
body.loaded .loader [data-window=left] {
    transform: translateX(-100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

body.loaded .loader [data-window=right] {
    transform: translateX(100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

body.loaded .loading {
    opacity: 0;
    transition: all 0.3s ease-out;
}
body.loaded .loader {
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s 1s ease-out;
}

@keyframes progress_circle {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}