CSS3 Loader Animation - Peeek

CSS3 Loader Animation - Peeek.markdown

CSS3 Loader Animation - Peeek

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.

License.

index.html

.peeek-loading
  %ul
    %li
    %li
    %li
    %li
    %li
    %li
    %li
    %li
    %li
    %li

script.js

/***
CSS3 Loader Animation - Peeek

Design: 
  Mikael Edwards
  http://drbl.in/jccQ

Front-End: 
  Rıza Selçuk Saydam
  http:/webmagazin.co

***/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$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);
	}
}