<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<h1>A collection of loaders using CSS 2D and 3D transforms </h1>
<h2>Flip Delay Up</h2>
<div class="loader loader--flipDelay loader--3d">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Flip Delay Down</h2>
<div class="loader loader--flipDelayDown loader--3d">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Flip Effect 2D</h2>
<div class="loader loader--slowFlip">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Flip Effect 3D</h2>
<div class="loader loader--slowFlip loader--3d">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Horizontal Flip 3D</h2>
<div class="loader loader--flipHoz loader--3d">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Horizontal Fade</h2>
<div class="loader loader--fade">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Slide Down</h2>
<div class="loader loader--slideDown">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Slide Up</h2>
<div class="loader loader--slideUp">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
<h2>Slide Both</h2>
<div class="loader loader--slideBoth">
<span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
body {
body {
font-family: 'PT Sans', sans-serif;
text-align: center;
background-color: #000;
padding-top: 40px;
}
h1, h2 {
background-color: rgba(200, 200, 200, 0.2);
padding: 20px;
text-transform: uppercase;
color: #fff;
}
h1 {
font-size: 24px;
margin-bottom: 40px;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
h2 {
font-size: 16px;
margin-bottom: 15%;
}
.loader {
display: block;
overflow: hidden;
margin-bottom: 15%;
font-size: 0;
}
.loader--3d {
transform-style: preserve-3d;
perspective: 800px;
}
.loader--slideBoth {
overflow: visible;
}
.loader-item {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 2px;
background-color: rgba(61, 92, 126, 0.7);
color: rgba(61, 92, 126, 0.7);
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
animation-delay: 100ms;
}
.loader-item:nth-child(2) {
animation-delay: 200ms;
}
.loader-item:nth-child(3) {
animation-delay: 300ms;
}
.loader-item:nth-child(4) {
animation-delay: 400ms;
}
.loader-item:nth-child(5) {
animation-delay: 500ms;
}
.loader-item:nth-child(6) {
animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
animation-name: flipHoz;
}
.loader--fade .loader-item {
animation-name: fade;
animation-duration: 1000ms;
}
.loader--slowFlip .loader-item:nth-child(1), .loader--flipHoz .loader-item:nth-child(1) {
animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2), .loader--flipHoz .loader-item:nth-child(2) {
animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3), .loader--flipHoz .loader-item:nth-child(3) {
animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4), .loader--flipHoz .loader-item:nth-child(4) {
animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5), .loader--flipHoz .loader-item:nth-child(5) {
animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6), .loader--flipHoz .loader-item:nth-child(6) {
animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
animation-name: flipDelay;
animation-direction: reverse;
}
.loader--slideDown .loader-item, .loader--slideUp .loader-item {
animation-name: slideDown;
animation-duration: 800ms;
animation-timing-function: linear;
}
.loader--slideDown .loader-item {
transform-origin: top left;
}
.loader--slideUp .loader-item {
transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
animation-name: slideBoth;
animation-duration: 1000ms;
transform-origin: bottom left;
animation-timing-function: linear;
}
/**********************************/
/* KEYFRAME ANIMATION DEFINITIONS */
/**********************************/
@keyframes slowFlip {
0% {
transform: rotateX(0deg);
}
40% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
@keyframes flipHoz {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
@keyframes slideDown {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
@keyframes slideBoth {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}