style.css

:root {
    --negro: #171717;
    --celeste: #99c2d1;
    --amarillo:#ede592;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: var(--negro);
    display: grid;
    place-items: center;
}
h1{
    position: absolute;
    top: 50%;
    text-align: center;
    color: var(--amarillo);
}
.supreme{
    width: 100%;
    height: 100%;
}
.page{
    position: absolute;
    width: 100%;
    height: 100%;
    background: hotpink;
    display: grid;
    place-items: center;
    position: absolute;
}
/*  inicio style pagina de carga */
.loader{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--celeste);
    position: absolute;
    z-index: 2;
    animation: loader 5s linear forwards;
}
@keyframes loader{
    0%{
        opacity: 1;
        visibility: visible;
    }
    95%{
        opacity: 1;
        visibility: hidden;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}
.loader div{
    background: var(--amarillo);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px;
    transform: scale(0);
    animation: scaling 2s linear infinite;
}
.loader div:nth-child(1){
    animation-delay: 0.2s;
}
.loader div:nth-child(2){
    animation-delay: 0.4s;
}
.loader div:nth-child(3){
    animation-delay: 0.6s;
}

@keyframes scaling {
    0%, 100%{
        transform: scale(0.2);
    }
    40%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.3);
    }
}

/*  fin style pagina de carga */