.cssload-back {
    display: none;
    align-items:flex-start;
    justify-content: center;
    background-color: lightcyan;
    position: absolute;
    vertical-align: middle;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    opacity: 0.5;
}

.bg-color {
    vertical-align: middle;
}
/* Frame Upload */
.onload {
    animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
    opacity: 0;
}
/* Balls */
.circle {
    border-radius: 50%;
    background-color: #000000;
    width: 13px;
    height: 13px;
    display: inline-block;
    float: none;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
    /* First Ball */
    .circle:first-child {
        animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
        background-color: #4285f4;
        margin-right: 6px;
    }
    /* Second Ball */
    .circle:nth-child(2) {
        animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
        background-color: #34a853;
        margin-right: 3px;
    }
    /* Third Ball */
    .circle:nth-child(3) {
        animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
        background-color: #fbbc05;
        margin-left: 3px;
    }
    /* Fourth Ball */
    .circle:last-child {
        animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
        background-color: #ea4335;
        margin-left: 6px;
    }
/*--- Animation Keyframes ---*/
/*-- Page Upload --*/
@keyframes body-opacity-change {
    from {
        opacity: 0;
        background-color: transparent;
    }

    to {
        opacity: 1;
        background-color: #1b1c2c;
    }
}
/*-- Balls Animation --*/
@keyframes upload {
    from {
        transform: translateY(35px);
    }

    to {
        transform: translateY(-35px);
    }
}