CSS
body {
background-color: #333;
}
.loader {
position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader .d1,
.loader .d2,
.loader .d3,
.loader .d4,
.loader .d5 {
position: absolute;
width: 10px;
height: 10px;
border: 50px solid transparent;
border-radius: 50%;
opacity: 0.8;
}
.loader .d1 {
animation: rotate 2s infinite ease 0s;
}
.loader .d2 {
animation: rotate 2s infinite ease -0.4s;
}
.loader .d3 {
animation: rotate 2s infinite ease -0.8s;
}
.loader .d4 {
animation: rotate 2s infinite ease -1.6s;
}
.loader .d5 {
animation: rotate 2s infinite ease -3.2s;
}
@keyframes rotate {
0% {
border-top: 50px solid #F44336;
border-left: 50px solid transparent;
border-bottom: 50px solid #2196F3;
border-right: 50px solid transparent;
transform: translate(-50%, -50%) rotate(0deg);
width: 2px;
height: 2px;
}
50% {
width: 100px;
height: 100px;
}
100% {
border-top: 50px solid transparent;
border-left: 50px solid #F44336;
border-bottom: 50px solid transparent;
border-right: 50px solid #2196F3;
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 2px;
}
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
