CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #333;
}
@keyframes scale {
0% { transform: scale(0.8); }
50% { transform: scale(1); }
100% { transform: scale(0.8); }
}
@keyframes opacity {
0% { opacity: 1; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes rotate {
0% { transform: rotateX(0)
rotateY(0)
rotateZ(-1080deg);
}
100% {
transform: rotateX(0)
rotateY(0)
rotateZ(0);
}
}
.loader {
width: 100px;
}
.loader .rotated {
transform-origin: 0 0;
transform: rotateZ(45deg);
}
.loader .rotated div {
border: 2px solid;
width: 75px;
height: 75px;
margin: 7px;
}
.loader div.square-1 {
transform-origin: 0 0;
animation: rotate 4s ease-in-out infinite;
border-color: #EE4D68;
}
.loader div.square-2 {
transform-origin: 0 0;
animation: rotate 2s ease-in-out infinite;
border-color: #F90;
}
.loader div.square-3 {
transform-origin: 0 0;
animation: rotate 1s ease-in-out infinite;
border-color: #00E4F6;
}
