SCSS
@import 'compass/css3';
$bg1:#cb2549;
$bg2:#2ECC71;
$bg3:#1abc9c;
$bg4:#2980b9;
@mixin keyframes($animationName) {
@-webkit-keyframes #{"$animationName"} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-ms-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
html,body {
height: 100%;
width: 100%;
overflow:hidden;
}
body {
padding:0;
margin:0;
}
.container {
position: absolute;
left:0;
right: 0;
top:20%;
bottom: 0;
width:100px;
height: 100px;
margin: auto;
&>div {
position: absolute;
left:50px;
}
&>div>div {
width:10px;
height: 10px;
border-radius: 100%;
background:#ffb500;
transition:all 0.5s ease ;
transform-origin: bottom;
animation: anim 2s ease infinite;
position: absolute;
left: 0px;
}
@for $i from 2 through 6 {
$left: '';
$top: '';
$rotate: '';
@if($i==2) { $left:36px; $top:7px;$rotate:-60deg; }
@if($i==3) { $left:63px; $top:9px; $rotate:60deg;}
@if($i==4) { $left:62px; $top:23px; $rotate:120deg;}
@if($i==5) { $left:35px; $top:21px; $rotate:-120deg;}
@if($i==6) { $left:48px; $top:30px; $rotate:-180deg;}
div:nth-child(#{$i}) {
@include transform(rotate($rotate));
top:$top;
left:$left;
}
}
}
.loader-1 {
background:$bg1;
width: 100%;
height: 100%;
display: inline-block;
float: left;
position: absolute;
.container {
animation: filteranim 2s ease infinite;
}
}
// .loader-2 {
// @extend .loader-1;
// right: 0;
// background:$bg2;
// }
// .loader-3 {
// @extend .loader-1;
// left: 0;
// bottom:0;
// background:$bg3;
// }
// .loader-4 {
// @extend .loader-1;
// right: 0;
// bottom:0;
// background:$bg4;
// }
@include keyframes(anim) {
0%{left:-50px;}
50%{left:50px;}
100%{left:-50px;}
}
@include keyframes(filteranim) {
0%{ filter: hue-rotate(0deg);}
50%{ filter: hue-rotate(360deg);}
}
