.loader{
width: 112px;
height: 112px;
margin: 0 auto;
position: relative;
}
.loader .loader-inner{
border-width: 16px;
border-style: solid;
border-radius: 5px;
box-sizing: border-box;
position: absolute;
display: block;
}
.loader .box1{
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
border-color: #EA2027;
border-left-color: #ce080e;
border-right-color: #ce080e;
animation: anime1 2.5s 0s forwards ease-in-out infinite;
}
.loader .box2{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
border-color: #0652DD;
border-left-color: #0642aa;
border-right-color: #0642aa;
animation: anime2 2.5s 0s forwards ease-in-out infinite;
}
.loader .box3{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
border-color: #009432;
border-left-color: #078230;
border-right-color: #078230;
animation: anime3 2.5s 0s forwards ease-in-out infinite;
}
@keyframes anime1{
0%{
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
12.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
25%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
37.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
50%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
62.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
75%{
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 0px;
}
87.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
100%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
}
@keyframes anime2{
0%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
12.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
25%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
37.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
50%{
width: 112px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
62.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
75%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
87.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
100%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
}
@keyframes anime3{
0%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
12.5%{
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
25%{
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 64px;
}
37.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
50%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
62.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
75%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
87.5%{
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
100%{
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
}