#loading {
    display: block;
    position: fixed;
    background-color: #4EB1EA;
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 10 ;


}

#loading span{
    --size : 15px; 
    width: var(--size);
    height: var(--size);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 1s ease-out;
    border-radius: 50%;
}


#loading span:nth-child(1){
    background-color: #FFFFFF;
    transform: translate(calc( -50% - var(--size)),0);
}

#loading span:nth-child(2){
    background-color: #FFFFFF;
    transform: translate(0,0);

}

#loading span:nth-child(3){
    background-color: #FFFFFF;
    transform: translate(calc( -50% + var(--size)*2),0);

}