SCSS
body {
background: linear-gradient(to left, #232526 , #414345);
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-45deg) translateX(-50%) translateY(-50%) scale(2,2);
margin-left: -45px;
margin-top: -45px;
&:before,
&:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
border-radius: 0 100% 0 0;
transform-origin: 0 100%;
}
&:before {
box-shadow: 0 -2px 0 0 #0cf;
animation: ice 1s infinite linear;
}
&:after {
box-shadow: 2px 0 0 0 #f00;
animation: fire 1s infinite linear;
}
}
@keyframes fire {
to {
transform: rotate(360deg);
}
}
@keyframes ice {
to {
transform: rotate(-360deg);
}
}
1 Response