Simple CSS3 Loading Icon

by Kevin Pliester

HTML

<div class="loader">
    <div class="cube_1"></div>
    <div class="cube_2"></div>
</div>

CSS

html, body {
    overflow: hidden;
}
.loader {
	position: absolute;
	left: 50%;
	top: 45%;
	line-height: 0;
}

.cube_1 {
	left: -50%;
	line-height: 0;
    -webkit-animation: loader_1 2s infinite;
    animation: loader_1 2s infinite;
    width: 10px;
    height: 10px;
    position: absolute;
	perspective: 1000;
	transform-style: preserve-3d;
    overflow: hidden;
    background: #000;
}

.cube_2 {
	left: -50%;
	line-height: 0;
    -webkit-animation: loader_2 2s infinite;
    animation: loader_2 2s infinite;
    width: 10px;
    height: 10px;
    position: absolute;
	perspective: 1000;
	transform-style: preserve-3d;
    overflow: hidden;
    background: #000;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes loader_1 {
    0%   {top: 0px;left: 0px;transform: rotateY(0deg);}
    25%  {top: 0px; left: 20px;transform: rotateY(180deg);}
    50%  {top: 20px; left: 20px;transform:rotateY(0deg);}
    75%  {top: 20px; left: 0px;transform: rotateY(180deg);}
    100% {top: 0px; left: 0px;transform: rotateY(0deg);}
} 
@-webkit-keyframes loader_2 {
    0%   {top: 20px; left: 20px;transform: rotateY(0deg);}
    25%  {top: 20px; left: 0px;transform: rotateY(180deg);}
    50%  {top: 0px; left: 0px;transform: rotateY(0deg);}
    75%  {top: 0px; left: 20px;transform: rotateY(180deg);}
    100% {top: 20px; left: 20px;transform: rotateY(0deg);}
} 

/* Standard syntax */ 
@keyframes loader_1 {
    0%   {top: 0px;left: 0px;transform: rotateY(0deg);}
    25%  {top: 0px; left: 20px;transform: rotateY(180deg);}
    50%  {top: 20px; left: 20px;transform:rotateY(0deg);}
    75%  {top: 20px; left: 0px;transform: rotateY(180deg);}
    100% {top: 0px; left: 0px;transform: rotateY(0deg);}
}
@keyframes loader_2 {
    0%   {top: 20px; left: 20px;transform: rotateY(0deg);}
    25%  {top: 20px; left: 0px;transform: rotateY(180deg);}
    50%  {top: 0px; left: 0px;transform: rotateY(0deg);}
    75%  {top: 0px; left: 20px;transform: rotateY(180deg);}
    100% {top: 20px; left: 20px;transform:...