.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); }
}