load.css

body{
    background-color: black;
}
.container-loading{
    /* border: 4px solid red; */
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    height: 100px;
    width: 100px;
}
.box{
    padding: 20px;
    position: absolute;
}
#box-1{
    border: 5px solid rgb(88, 202, 255);
    animation-name: Box1;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}
#box-2{
    border: 5px solid rgb(255, 255, 140);
    animation-name: Box2;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}
#box-3{
    border: 5px solid rgb(136, 255, 136);
    animation-name: Box3;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}
#box-4{
    border: 5px solid rgb(255, 115, 115);
    animation-name: Box4;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}
@keyframes Box1{
    0%{top: 0%;left: 0%;}
    25%{top: 0%;left: 50%;}
    50%{top: 50%;left: 50%;}
    75%{top: 50%;left: 0%;}
    100%{top: 0%;left: 0%;}
}
@keyframes Box2{
    0%{top: 0%;right: 0%;}
    25%{top: 50%;right: 0%;}
    50%{top: 50%;right: 50%;}
    75%{top: 0%;right: 50%;}
    100%{top: 0%;right: 0%;}
}
@keyframes Box4{
    0%{bottom: 0%;right: 0%;}
    25%{bottom: 0%;right: 50%;}
    50%{bottom: 50%;right: 50%;}
    75%{bottom: 50%;right: 0%;}
    100%{bottom: 0%;right: 0%;}
}
@keyframes Box3{
    0%{bottom: 0%;left: 0%;}
    25%{bottom: 50%;left: 0%;}
    50%{bottom: 50%;left: 50%;}
    75%{bottom: 0%;left: 50%;}
    100%{bottom: 0%;left: 0%;}
}