[html] <style>
.cssload-preloader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
}
.cssload-preloader > .cssload-preloader-box {
position: absolute;
height: 37px;
top: 50%;
left: 50%;
margin: -15px 0 0 -146px;
perspective: 195px;
-o-perspective: 195px;
-ms-perspective: 195px;
-webkit-perspective: 195px;
-moz-perspective: 195px;
}
.cssload-preloader .cssload-preloader-box > div {
position: relative;
width: 37px;
height: 37px;
background: rgb(204,204,204);
float: left;
text-align: center;
line-height: 37px;
font-family: motf;
font-size: 37px;
color: rgb(255,255,255);
}.cssload-preloader .cssload-preloader-box > div:nth-child(1) {
background: rgb(0,0,0);
margin-right: 15px;
animation: cssload-movement 1860ms ease 0ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 0ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 0ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 0ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 0ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(2) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 1860ms ease 232.5ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 232.5ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 232.5ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 232.5ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 232.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(3) {
background: rgb(0,0,0);
margin-right: 15px;
animation: cssload-movement 1860ms ease 465ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 465ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 465ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 465ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 465ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(4) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 1860ms ease 697.5ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 697.5ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 697.5ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 697.5ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 697.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(5) {
background: rgb(0,0,0);
margin-right: 15px;
animation: cssload-movement 1860ms ease 930ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 930ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 930ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 930ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 930ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(6) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 1860ms ease 1162.5ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 1162.5ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 1162.5ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 1162.5ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 1162.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(7) {
background: rgb(0,0,0);
margin-right: 15px;
animation: cssload-movement 1860ms ease 1395ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 1395ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 1395ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 1395ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 1395ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(8) {
background: rgb(51,102,255);
margin-right: 15px;
animation: cssload-movement 1860ms ease 1627.5ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 1627.5ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 1627.5ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 1627.5ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 1627.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(9) {
background: rgba(0,0,0,0.98);
margin-right: 15px;
animation: cssload-movement 1860ms ease 1860ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 1860ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 1860ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 1860ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 1860ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(10) {
background: #3366FF;
margin-right: 15px;
animation: cssload-movement 1860ms ease 2092.5ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 2092.5ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 2092.5ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 2092.5ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 2092.5ms infinite alternate;
}
.cssload-preloader .cssload-preloader-box > div:nth-child(11) {
background: #3366FF;
margin-right: 15px;
animation: cssload-movement 1860ms ease 2325ms infinite alternate;
-o-animation: cssload-movement 1860ms ease 2325ms infinite alternate;
-ms-animation: cssload-movement 1860ms ease 2325ms infinite alternate;
-webkit-animation: cssload-movement 1860ms ease 2325ms infinite alternate;
-moz-animation: cssload-movement 1860ms ease 2325ms infinite alternate;
}
@keyframes cssload-movement {
from {
transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgba(0,0,0,0.4);
background: #3399FF;
}
}
@-o-keyframes cssload-movement {
from {
-o-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-o-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgba(0,0,0,0.4);
background: #3399FF;
}
}
@-ms-keyframes cssload-movement {
from {
-ms-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-ms-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgba(0,0,0,0.4);
background: #3399FF;
}
}
@-webkit-keyframes cssload-movement {
from {
-webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-webkit-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgba(0,0,0,0.4);
background: #3399FF;
}
}
@-moz-keyframes cssload-movement {
from {
-moz-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-moz-transform: scale(1.5) translateY(-24px) rotateX(45deg);
box-shadow: 0 24px 39px rgba(0,0,0,0.4);
background: #3399FF;
}
} </style> <div class="cssload-preloader">
<div class="cssload-preloader-box"> <div>П</div> <div>О</div> <div>З</div> <div>Д</div> <div>Р</div> <div>А</div> <div>В</div> <div>Л</div> <div>Я</div> <div>Е</div> <div>М</div></div>
</div>[/html]