.loaderContainer {

margin-top: 250px;

}

.loader {

position: relative;
width: 44px;
height: 8px;
margin: 12px auto;

}

.dot {

display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #ccc;
position: absolute;

}

.dot_1 {

animation: animateDot1 1.5s linear infinite;
left: 12px;
background: #e579b8;

}

.dot_2 {

animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;

}

.dot_3 {

animation: animateDot3 1.5s linear infinite;
left: 12px;

}

.dot_4 {

animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;

}

@keyframes animateDot1 {

0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(180deg) translateX(-12px);
}
75% {
    transform: rotate(180deg) translateX(-12px);
}
100% {
    transform: rotate(360deg) translateX(-12px);
}

} @keyframes animateDot2 {

0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(-180deg) translateX(-12px);
}
75% {
    transform: rotate(-180deg) translateX(-12px);
}
100% {
    transform: rotate(-360deg) translateX(-12px);
}

} @keyframes animateDot3 {

0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(180deg) translateX(12px);
}
75% {
    transform: rotate(180deg) translateX(12px);
}
100% {
    transform: rotate(360deg) translateX(12px);
}

} @keyframes animateDot4 {

0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(-180deg) translateX(12px);
}
75% {
    transform: rotate(-180deg) translateX(12px);
}
100% {
    transform: rotate(-360deg) translateX(12px);
}

}