.preLoad{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100px;
    height:100px;
}
.preLoad div
{
border:0;
margin:0;
width:30%;
height:30%;
position:absolute;
border-radius:25%;
animation:spin 4s ease infinite
}
.preLoad :first-child
{
background:#F4B41A;
animation-delay:-3.5s
}
.preLoad :nth-child(2)
{
background:#143D59;
animation-delay:-3s
}
.preLoad :nth-child(3)
{
background:#143D59;
animation-delay:-2.5s
}
.preLoad :nth-child(4)
{
background:#143D59;
animation-delay:-2s
}
.preLoad :nth-child(5)
{
background:#F4B41A;
animation-delay:-1.5s
}
.preLoad :nth-child(6)
{
background:#143D59;
animation-delay:-1s
}
.preLoad :nth-child(7)
{
background:#143D59;
animation-delay:-0.5s
}
.preLoad :last-child
{
background:#143D59
}
@keyframes spin
{
12.5%{transform:translate(150%)}
25%{transform:translate(300%)}
37.5%{transform:translate(300%, 150%)}
50%{transform:translate(300%, 300%)}
62.5%{transform:translate(150%, 300%)}
75%{transform:translate(0%, 300%)}
87.5%{transform:translate(0%, 150%)}
}
/*Header*/
.logo .preLogo
{
margin-top: 50px;
margin-left: 50px;
transform:translate(-50%, -50%);
width:50px;
height:50px;
}
.logo .preLogo div
{
border:0;
margin:0;
width:30%;
height:30%;
position:absolute;
border-radius:25%;
animation:spin 4s ease infinite
}
.logo .preLogo :first-child
{
background:#F4B41A;
animation-delay:-3.5s
}
.logo .preLogo :nth-child(2)
{
background:#143D59;
animation-delay:-3s
}
.logo .preLogo :nth-child(3)
{
background:#143D59;
animation-delay:-2.5s
}
.logo .preLogo :nth-child(4)
{
background:#143D59;
animation-delay:-2s
}
.logo .preLogo :nth-child(5)
{
background:hsl(42, 91%, 53%);
animation-delay:-1.5s
}
.logo .preLogo :nth-child(6)
{
background:#143D59;
animation-delay:-1s
}
.logo .preLogo :nth-child(7)
{
background:#143D59;
animation-delay:-0.5s
}
.logo .preLogo :last-child
{
background:#143D59
}