A quick loading animation using CSS. This is taken from the dribbble shot https://dribbble.com/shots/946595-App-loader-GIF-animation
A Pen by Jamie Coulter on CodePen.
A quick loading animation using CSS. This is taken from the dribbble shot https://dribbble.com/shots/946595-App-loader-GIF-animation
A Pen by Jamie Coulter on CodePen.
.loader | |
.loader_overlay | |
.loader_cogs | |
.loader_cogs__top | |
-(1..3).each do | |
.top_part | |
.top_hole | |
.loader_cogs__left | |
-(1..3).each do | |
.left_part | |
.left_hole | |
.loader_cogs__bottom | |
-(1..3).each do | |
.bottom_part | |
.bottom_hole <!-- lol --> | |
%p loading | |
%h1 Cog loader | |
%h2 Created in pure css |
/* Inspired by this super groovy dribbble shot https://dribbble.com/shots/946595-App-loader-GIF-animation?list=searches&tag=loader&offset=3 */ |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
/* Fonts */ | |
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
/* Variables */ | |
$pink:#f98db9; | |
$blue:#97ddff; | |
$yellow:#ffcd66; | |
$font:'Montserrat', sans-serif; | |
$heading:rgb(87, 110, 129); | |
$sub:#F98DB9; | |
/* Mixins */ | |
@mixin center{ | |
position:absolute; | |
left:0; | |
right:0; | |
top:0; | |
bottom:0; | |
margin:auto; | |
} | |
@mixin hole{ | |
border-radius:100%; | |
background:white; | |
position: absolute; | |
} | |
body{ | |
height:100vh; | |
font-family:$font; | |
text-align:center; | |
overflow:hidden; | |
h1{ | |
text-transform:uppercase; | |
font-size:30px; | |
color:$heading; | |
margin:30px 0px 0px 0px; | |
} | |
h2{ | |
font-weight:normal; | |
font-size:18px; | |
color:$sub; | |
margin:10px 0px 0px 0px; | |
} | |
p{ | |
margin:0 auto; | |
} | |
.loader{ | |
height:100%; | |
position:relative; | |
margin:auto; | |
width:400px; | |
&_overlay{ | |
width:150px; | |
height:150px; | |
background:transparent; | |
box-shadow:0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset; | |
border-radius:100%; | |
z-index:-1; | |
@include center; | |
} | |
&_cogs{ | |
z-index:-2; | |
width:100px; | |
height:100px; | |
top: -120px !important; | |
@include center; | |
&__top{ | |
position:relative; | |
width:100px; | |
height:100px; | |
transform-origin: 50px 50px; | |
animation:rotate 10s infinite linear; | |
@for $i from 1 through 3{ | |
div:nth-of-type(#{$i}){ | |
transform:rotate($i * 30deg) | |
} | |
} | |
div.top_part{ | |
width:100px; | |
border-radius:10px; | |
position:absolute; | |
height:100px; | |
background:$pink; | |
} | |
div.top_hole{ | |
width:50px; | |
height:50px; | |
@include hole; | |
@include center; | |
} | |
} | |
&__left{ | |
position: relative; | |
width: 80px; | |
transform: rotate(16deg); | |
top: 28px; | |
transform-origin: 40px 40px; | |
animation:rotate_left 10s .1s infinite reverse linear; | |
left: -24px; | |
height: 80px; | |
@for $i from 1 through 3{ | |
div:nth-of-type(#{$i}){ | |
transform:rotate($i * 30deg) | |
} | |
} | |
div.left_part{ | |
width:80px; | |
border-radius:6px; | |
position:absolute; | |
height:80px; | |
background:$blue; | |
} | |
div.left_hole{ | |
width:40px; | |
height:40px; | |
@include hole; | |
@include center; | |
} | |
} | |
&__bottom{ | |
position: relative; | |
width: 60px; | |
top: -65px; | |
transform-origin: 30px 30px; | |
animation:rotate_left 10.2s .4s infinite linear; | |
transform: rotate(4deg); | |
left: 79px; | |
height: 60px; | |
@for $i from 1 through 3{ | |
div:nth-of-type(#{$i}){ | |
transform:rotate($i * 30deg) | |
} | |
} | |
div.bottom_part{ | |
width:60px; | |
border-radius:5px; | |
position:absolute; | |
height:60px; | |
background:$yellow; | |
} | |
div.bottom_hole{ | |
width:30px; | |
height:30px; | |
@include hole; | |
@include center; | |
} | |
} | |
} | |
} | |
} | |
/* Animations */ | |
@keyframes rotate{ | |
from{transform:rotate(0deg)} | |
to{transform:rotate(360deg)} | |
} | |
@keyframes rotate_left{ | |
from{transform:rotate(16deg)} | |
to{transform:rotate(376deg)} | |
} | |
@keyframes rotate_right{ | |
from{transform:rotate(4deg)} | |
to{transform:rotate(364deg)} | |
} |