Loader (n+)

HTML
<div class="loader-1"> <div class="container"> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> </div> </div>
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);} }
JAVASCRIPT
Expand for more options Login