Google Preloader

HTML
<div class="load1"> <div class="load2"> <div class="load3"> <div class="load4"> <div class="load5"> <div class="load6"> <!-- <i class="fa fa-google"></i> --> </div> </div> </div> </div> </div> </div> <i class="fa fa-google"></i>
SCSS
$blue:#4885ed; $red:#db3236; $yellow:#f4c20d; $green:#3cba54; $background:lightyellow; @mixin flex($flex,$center){ display:$flex; justify-content:$center; align-items:$center; display:-webkit-$flex; display:-ms-$flex; display:$flex; -webkit-justify-content:$center; -ms-flex-pack:$center; justify-content:$center; -webkit-align-items:$center; -ms-flex-align:$center; align-items:$center; } @mixin shape($size){ width:$size; height:$size; } @mixin border($style,$width,$border-top-color,$border-right-color,$border-bottom-color,$border-left-color){ border-style:$style; border-width:$width; border-top-color:$border-top-color; border-right-color:$border-right-color; border-bottom-color:$border-bottom-color; border-left-color:$border-left-color; } body{ background:$background; height:100vh; @include flex(flex,center); overflow:hidden; } .load1{ @include shape(200px); @include border(solid,3px,$blue,$background,$background,$blue); border-radius:50%; @include flex(flex,center); animation:spin1 1.8s linear infinite; } .load2{ @include shape(180px); @include border(solid,3px,$background,$red,$red,$background); border-radius:50%; @include flex(flex,center); animation: spin2 1.2s linear infinite; } .load3{ @include shape(160px); @include border(solid,3px,$yellow,$background,$background,$yellow); border-radius:50%; @include flex(flex,center); animation:spin1 1.4s linear infinite; } .load4{ @include shape(140px); @include border(solid,3px,$background,$blue,$blue,$background); border-radius:50%; @include flex(flex,center); animation:spin2 1.6s linear infinite; } .load5{ @include shape(120px); @include border(solid,3px,$green,$background,$background,$green); border-radius:50%; @include flex(flex,center); animation:spin1 2s linear infinite; } .load6{ @include shape(100px); @include border(solid,3px,$background,$red,$red,$background); border-radius:50%; // @include flex(flex,center); // position:relative; animation:spin2 2.3s linear infinite; } .fa{ position:fixed; font-size:2.3em; color:$blue; animation:colorchange 5s 0s linear infinite; } @keyframes spin1{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @keyframes spin2{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } @keyframes colorchange{ 10%{ color:$blue; } 20%{ color:$red; } 40%{ color:$yellow; } 60%{ color:$blue; } 80%{ color:$green; } 90%{ color:$red; } 100%{ color:$blue; } }
JAVASCRIPT
Expand for more options Login