This is the loader animation that designed by Mikael Edwards and developed by Rıza Selçuk Saydam for Peeek.
A Pen by Rıza Selçuk Saydam on CodePen.
This is the loader animation that designed by Mikael Edwards and developed by Rıza Selçuk Saydam for Peeek.
A Pen by Rıza Selçuk Saydam on CodePen.
.peeek-loading | |
%ul | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li |
/*** | |
CSS3 Loader Animation - Peeek | |
Design: | |
Mikael Edwards | |
http://drbl.in/jccQ | |
Front-End: | |
Rıza Selçuk Saydam | |
http:/webmagazin.co | |
***/ |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$size:1.4em; | |
$dotCount:10; | |
$animationTime:2.5s; | |
.peeek-loading{ | |
background-color: #38d368; | |
overflow: hidden; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
height: 100%; | |
width: 100%; | |
} | |
.peeek-loading ul{ | |
position: absolute; | |
left: calc(50% - 0.7em); | |
top: calc(50% - 4.2em); | |
display: inline-block; | |
text-indent:$size*2; | |
} | |
.peeek-loading ul li:after, | |
.peeek-loading ul:after{ | |
width: $size; | |
height: $size; | |
background-color: #fff; | |
border-radius: 100%; | |
} | |
.peeek-loading ul li:after, | |
.peeek-loading ul:after{ | |
content:""; | |
display: block; | |
} | |
.peeek-loading ul:after{ | |
position: absolute; | |
top: $size*2; | |
} | |
.peeek-loading li{ | |
position: absolute; | |
padding-bottom: $size*4; | |
top: 0; | |
left: 0; | |
} | |
// Creating Circle and Animation Delay | |
@for $i from 1 through 10{ | |
.peeek-loading li:nth-child(#{$i}){ | |
$deg:($i - 1)*(360deg/$dotCount); | |
transform: rotate($deg); | |
animation-delay: $animationTime*$i/$dotCount/2; | |
} | |
.peeek-loading li:nth-child(#{$i}):after{ | |
animation-delay: $animationTime*$i/$dotCount/2; | |
} | |
} | |
// Animations | |
.peeek-loading li{ | |
animation: dotAnimation $animationTime infinite; | |
} | |
@keyframes dotAnimation { | |
0%, 55%, 100% { | |
padding: 0 0 $size*4 0; | |
} | |
5%,50% { | |
padding: $size*2 0; | |
} | |
} | |
.peeek-loading li:after{ | |
animation: dotAnimationTwo $animationTime infinite; | |
} | |
@-webkit-keyframes dotAnimationTwo { | |
0%, 55%, 100% { | |
opacity:1; | |
transform: scale(1); | |
} | |
5%,50% { | |
opacity: .5; | |
transform: scale(0.5); | |
} | |
} |