.loader{
    width: 110px;
    height: 35px;
    margin: 50px auto 0;
}
.loader .line{
    background: linear-gradient(rgb(5, 103, 169), #e01d3d, #51098c);
    height: 35px;
    width: 7px;
    border-radius: 10px;
    display: inline-block;
    animation: animate 1s ease infinite;
}
.loader .line:nth-child(1),
.loader .line:nth-child(10){
    animation-delay: 0.8s;
}
.loader .line:nth-child(2),
.loader .line:nth-child(9){
    animation-delay: 0.6s;
}
.loader .line:nth-child(3),
.loader .line:nth-child(8){
    animation-delay: 0.4s;
}
.loader .line:nth-child(4),
.loader .line:nth-child(7){
    animation-delay: 0.2s;
}
.loader .line:nth-child(5),
.loader .line:nth-child(6){
    animation-delay: 0s;
}
@keyframes animate{
    0%,100%{ transform: scale(0); }
    50%{ transform: scale(1.5); }
}