CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #333;
overflow: hidden;
}
@keyframes loader {
0% { transform: rotate(-45deg); }
50% { transform: rotate(-135deg); }
100% { transform: rotate(-225deg); }
}
@keyframes span-1 {
0% { transform: translate(0); }
50% {
transform: translate(-200px,0);
border-color: #EE4D68;
}
100% { transform: translate(0); }
}
@keyframes span-2 {
0% { transform: translate(0); }
50% {
transform: translate(200px,0);
border-color: #875678;
}
100% { transform: translate(0); }
}
@keyframes span-3 {
0% { transform: translate(0); }
50% {
transform: translate(0,-200px);
border-color: #F90;
}
100% { transform: translate(0); }
}
@keyframes span-4 {
0% { transform: translate(0); }
50% {
transform: translate(0,200px);
border-color: #00E4F6;
}
100% { transform: translate(0); }
}
.loader {
width: 50px;
height: 50px;
position: relative;
animation: loader 2s infinite ease-in-out;
}
.loader span {
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
border: 2px solid #ddd;
}
.loader span:nth-child(1) {
animation: span-1 2s ease-in-out infinite;
}
.loader span:nth-child(2) {
animation: span-2 2s ease-in-out infinite;
}
.loader span:nth-child(3) {
animation: span-3 2s ease-in-out infinite;
}
.loader span:nth-child(4) {
animation: span-4 2s ease-in-out infinite;
}
1 Response