SCSS
html {
background: linear-gradient(to left, #BE93C5 , #7BC6CC);
overflow: hidden;
height: 100%;
}
.loader {
height: 40px;
width: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
animation: rotate 15s linear;
&:before,
&:after {
content: "";
height: 40px;
width: 40px;
border: 8px solid rgba(255,255,255,.5);
border-radius: 10px;
position: absolute;
top: 0;
}
&:before {
animation: animate 2s infinite linear;
}
&:after {
animation: animate2 2s infinite linear;
}
}
@keyframes animate {
100% { transform: rotate(180deg) skew(360deg); }
}
@keyframes animate2 {
100% { transform: rotate(-180deg) skew(-360deg); }
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
