прелоадери

• 1

<div class="cssload-thecube">
<div class="cssload-cube cssload-c1"></div>
<div class="cssload-cube cssload-c2"></div>
<div class="cssload-cube cssload-c4"></div>
<div class="cssload-cube cssload-c3"></div>
</div>

.cssload-thecube {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(43,160,199);
animation: cssload-fold-thecube 4.2s infinite linear both;
-o-animation: cssload-fold-thecube 4.2s infinite linear both;
-ms-animation: cssload-fold-thecube 4.2s infinite linear both;
-webkit-animation: cssload-fold-thecube 4.2s infinite linear both;
-moz-animation: cssload-fold-thecube 4.2s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
transform: scale(1.1) rotateZ(180deg);
-o-transform: scale(1.1) rotateZ(180deg);
-ms-transform: scale(1.1) rotateZ(180deg);
-webkit-transform: scale(1.1) rotateZ(180deg);
-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
transform: scale(1.1) rotateZ(270deg);
-o-transform: scale(1.1) rotateZ(270deg);
-ms-transform: scale(1.1) rotateZ(270deg);
-webkit-transform: scale(1.1) rotateZ(270deg);
-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
animation-delay: 0.53s;
-o-animation-delay: 0.53s;
-ms-animation-delay: 0.53s;
-webkit-animation-delay: 0.53s;
-moz-animation-delay: 0.53s;
}
.cssload-thecube .cssload-c3:before {
animation-delay: 1.05s;
-o-animation-delay: 1.05s;
-ms-animation-delay: 1.05s;
-webkit-animation-delay: 1.05s;
-moz-animation-delay: 1.05s;
}
.cssload-thecube .cssload-c4:before {
animation-delay: 1.58s;
-o-animation-delay: 1.58s;
-ms-animation-delay: 1.58s;
-webkit-animation-delay: 1.58s;
-moz-animation-delay: 1.58s;
}



@keyframes cssload-fold-thecube {
0%, 10% {
transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-o-keyframes cssload-fold-thecube {
0%, 10% {
-o-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-o-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-o-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-ms-keyframes cssload-fold-thecube {
0%, 10% {
-ms-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-ms-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-ms-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-webkit-keyframes cssload-fold-thecube {
0%, 10% {
-webkit-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-moz-keyframes cssload-fold-thecube {
0%, 10% {
-moz-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-moz-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-moz-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

• 2  -  менший

<div class="cssload-thecube">
<div class="cssload-cube cssload-c1"></div>
<div class="cssload-cube cssload-c2"></div>
<div class="cssload-cube cssload-c4"></div>
<div class="cssload-cube cssload-c3"></div>
</div>


.cssload-thecube {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(43,160,199,0.52);
animation: cssload-fold-thecube 5.64s infinite linear both;
-o-animation: cssload-fold-thecube 5.64s infinite linear both;
-ms-animation: cssload-fold-thecube 5.64s infinite linear both;
-webkit-animation: cssload-fold-thecube 5.64s infinite linear both;
-moz-animation: cssload-fold-thecube 5.64s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
transform: scale(1.1) rotateZ(180deg);
-o-transform: scale(1.1) rotateZ(180deg);
-ms-transform: scale(1.1) rotateZ(180deg);
-webkit-transform: scale(1.1) rotateZ(180deg);
-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
transform: scale(1.1) rotateZ(270deg);
-o-transform: scale(1.1) rotateZ(270deg);
-ms-transform: scale(1.1) rotateZ(270deg);
-webkit-transform: scale(1.1) rotateZ(270deg);
-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
animation-delay: 0.71s;
-o-animation-delay: 0.71s;
-ms-animation-delay: 0.71s;
-webkit-animation-delay: 0.71s;
-moz-animation-delay: 0.71s;
}
.cssload-thecube .cssload-c3:before {
animation-delay: 1.41s;
-o-animation-delay: 1.41s;
-ms-animation-delay: 1.41s;
-webkit-animation-delay: 1.41s;
-moz-animation-delay: 1.41s;
}
.cssload-thecube .cssload-c4:before {
animation-delay: 2.12s;
-o-animation-delay: 2.12s;
-ms-animation-delay: 2.12s;
-webkit-animation-delay: 2.12s;
-moz-animation-delay: 2.12s;
}



@keyframes cssload-fold-thecube {
0%, 10% {
transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-o-keyframes cssload-fold-thecube {
0%, 10% {
-o-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-o-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-o-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-ms-keyframes cssload-fold-thecube {
0%, 10% {
-ms-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-ms-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-ms-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-webkit-keyframes cssload-fold-thecube {
0%, 10% {
-webkit-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

@-moz-keyframes cssload-fold-thecube {
0%, 10% {
-moz-transform: perspective(136px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-moz-transform: perspective(136px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-moz-transform: perspective(136px) rotateY(180deg);
opacity: 0;
}
}

• 3   -  прозорий фон - більший

<div class="cssload-thecube">

<div class="cssload-cube cssload-c1"></div>

<div class="cssload-cube cssload-c2"></div>

<div class="cssload-cube cssload-c4"></div>

<div class="cssload-cube cssload-c3"></div>

</div>

.cssload-thecube {

width: 206px;

height: 206px;

margin: 0 auto;

margin-top: 138px;

position: relative;

transform: rotateZ(45deg);

-o-transform: rotateZ(45deg);

-ms-transform: rotateZ(45deg);

-webkit-transform: rotateZ(45deg);

-moz-transform: rotateZ(45deg);

}

.cssload-thecube .cssload-cube {

position: relative;

transform: rotateZ(45deg);

-o-transform: rotateZ(45deg);

-ms-transform: rotateZ(45deg);

-webkit-transform: rotateZ(45deg);

-moz-transform: rotateZ(45deg);

}

.cssload-thecube .cssload-cube {

float: left;

width: 50%;

height: 50%;

position: relative;

transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

}

.cssload-thecube .cssload-cube:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(43,160,199,0.52);

animation: cssload-fold-thecube 5.64s infinite linear both;

-o-animation: cssload-fold-thecube 5.64s infinite linear both;

-ms-animation: cssload-fold-thecube 5.64s infinite linear both;

-webkit-animation: cssload-fold-thecube 5.64s infinite linear both;

-moz-animation: cssload-fold-thecube 5.64s infinite linear both;

transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

}

.cssload-thecube .cssload-c2 {

transform: scale(1.1) rotateZ(90deg);

-o-transform: scale(1.1) rotateZ(90deg);

-ms-transform: scale(1.1) rotateZ(90deg);

-webkit-transform: scale(1.1) rotateZ(90deg);

-moz-transform: scale(1.1) rotateZ(90deg);

}

.cssload-thecube .cssload-c3 {

transform: scale(1.1) rotateZ(180deg);

-o-transform: scale(1.1) rotateZ(180deg);

-ms-transform: scale(1.1) rotateZ(180deg);

-webkit-transform: scale(1.1) rotateZ(180deg);

-moz-transform: scale(1.1) rotateZ(180deg);

}

.cssload-thecube .cssload-c4 {

transform: scale(1.1) rotateZ(270deg);

-o-transform: scale(1.1) rotateZ(270deg);

-ms-transform: scale(1.1) rotateZ(270deg);

-webkit-transform: scale(1.1) rotateZ(270deg);

-moz-transform: scale(1.1) rotateZ(270deg);

}

.cssload-thecube .cssload-c2:before {

animation-delay: 0.71s;

-o-animation-delay: 0.71s;

-ms-animation-delay: 0.71s;

-webkit-animation-delay: 0.71s;

-moz-animation-delay: 0.71s;

}

.cssload-thecube .cssload-c3:before {

animation-delay: 1.41s;

-o-animation-delay: 1.41s;

-ms-animation-delay: 1.41s;

-webkit-animation-delay: 1.41s;

-moz-animation-delay: 1.41s;

}

.cssload-thecube .cssload-c4:before {

animation-delay: 2.12s;

-o-animation-delay: 2.12s;

-ms-animation-delay: 2.12s;

-webkit-animation-delay: 2.12s;

-moz-animation-delay: 2.12s;

}

@keyframes cssload-fold-thecube {

0%, 10% {

transform: perspective(385px) rotateX(-180deg);

opacity: 0;

}

25%,

75% {

transform: perspective(385px) rotateX(0deg);

opacity: 1;

}

90%,

100% {

transform: perspective(385px) rotateY(180deg);

opacity: 0;

}

}

@-o-keyframes cssload-fold-thecube {

0%, 10% {

-o-transform: perspective(385px) rotateX(-180deg);

opacity: 0;

}

25%,

75% {

-o-transform: perspective(385px) rotateX(0deg);

opacity: 1;

}

90%,

100% {

-o-transform: perspective(385px) rotateY(180deg);

opacity: 0;

}

}

@-ms-keyframes cssload-fold-thecube {

0%, 10% {

-ms-transform: perspective(385px) rotateX(-180deg);

opacity: 0;

}

25%,

75% {

-ms-transform: perspective(385px) rotateX(0deg);

opacity: 1;

}

90%,

100% {

-ms-transform: perspective(385px) rotateY(180deg);

opacity: 0;

}

}

@-webkit-keyframes cssload-fold-thecube {

0%, 10% {

-webkit-transform: perspective(385px) rotateX(-180deg);

opacity: 0;

}

25%,

75% {

-webkit-transform: perspective(385px) rotateX(0deg);

opacity: 1;

}

90%,

100% {

-webkit-transform: perspective(385px) rotateY(180deg);

opacity: 0;

}

}

@-moz-keyframes cssload-fold-thecube {

0%, 10% {

-moz-transform: perspective(385px) rotateX(-180deg);

opacity: 0;

}

25%,

75% {

-moz-transform: perspective(385px) rotateX(0deg);

opacity: 1;

}

90%,

100% {

-moz-transform: perspective(385px) rotateY(180deg);

opacity: 0;

}

}

• 4

<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>


.windows8 {
position: relative;
width: 190px;
height:190px;
margin:auto;
}

.windows8 .wBall {
position: absolute;
width: 181px;
height: 181px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 4.5325s infinite;
-o-animation: orbit 4.5325s infinite;
-ms-animation: orbit 4.5325s infinite;
-webkit-animation: orbit 4.5325s infinite;
-moz-animation: orbit 4.5325s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 24px;
height: 24px;
background: rgb(255,255,255);
left:0px;
top:0px;
border-radius: 24px;
}

.windows8 #wBall_1 {
animation-delay: 0.986s;
-o-animation-delay: 0.986s;
-ms-animation-delay: 0.986s;
-webkit-animation-delay: 0.986s;
-moz-animation-delay: 0.986s;
}

.windows8 #wBall_2 {
animation-delay: 0.193s;
-o-animation-delay: 0.193s;
-ms-animation-delay: 0.193s;
-webkit-animation-delay: 0.193s;
-moz-animation-delay: 0.193s;
}

.windows8 #wBall_3 {
animation-delay: 0.3965s;
-o-animation-delay: 0.3965s;
-ms-animation-delay: 0.3965s;
-webkit-animation-delay: 0.3965s;
-moz-animation-delay: 0.3965s;
}

.windows8 #wBall_4 {
animation-delay: 0.5895s;
-o-animation-delay: 0.5895s;
-ms-animation-delay: 0.5895s;
-webkit-animation-delay: 0.5895s;
-moz-animation-delay: 0.5895s;
}

.windows8 #wBall_5 {
animation-delay: 0.793s;
-o-animation-delay: 0.793s;
-ms-animation-delay: 0.793s;
-webkit-animation-delay: 0.793s;
-moz-animation-delay: 0.793s;
}



@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}
}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}

• 5   сіре  на  прозорому

це  вставила  над  </body>

<div class="overlay-loader">

<div class="loader">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>

 а  це  поставила  над  ]]></b:skin>

.overlay-loader {

display: block;

margin: auto;

width: 463px;

height: 463px;

position: relative;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.loader {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 463px;

height: 463px;

animation-name: rotateAnim;

-o-animation-name: rotateAnim;

-ms-animation-name: rotateAnim;

-webkit-animation-name: rotateAnim;

-moz-animation-name: rotateAnim;

animation-duration: 0.98s;

-o-animation-duration: 0.98s;

-ms-animation-duration: 0.98s;

-webkit-animation-duration: 0.98s;

-moz-animation-duration: 0.98s;

animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-timing-function: linear;

-o-animation-timing-function: linear;

-ms-animation-timing-function: linear;

-webkit-animation-timing-function: linear;

-moz-animation-timing-function: linear;

}

.loader div {

width: 37px;

height: 37px;

border-radius: 50%;

border: 5px solid rgba(136,136,136,0.25);

position: absolute;

top: 9px;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.loader div:nth-child(odd) {

border-top: none;

border-left: none;

}

.loader div:nth-child(even) {

border-bottom: none;

border-right: none;

}

.loader div:nth-child(2) {

border-width: 9px;

left: 0px;

top: -19px;

width: 56px;

height: 56px;

}

.loader div:nth-child(3) {

border-width: 9px;

left: -5px;

top: 14px;

width: 83px;

height: 83px;

}

.loader div:nth-child(4) {

border-width: 14px;

left: -5px;

top: -19px;

width: 111px;

height: 111px;

}

.loader div:nth-child(5) {

border-width: 14px;

left: -5px;

top: 19px;

width: 148px;

height: 148px;

}

.loader div:nth-child(6) {

border-width: 19px;

left: 0px;

top: -19px;

width: 185px;

height: 185px;

}

.loader div:nth-child(7) {

border-width: 19px;

left: 0px;

top: 28px;

width: 231px;

height: 231px;

}

@keyframes rotateAnim {

from {

transform: rotate(360deg);

}

to {

transform: rotate(0deg);

}

}

@-o-keyframes rotateAnim {

from {

-o-transform: rotate(360deg);

}

to {

-o-transform: rotate(0deg);

}

}

@-ms-keyframes rotateAnim {

from {

-ms-transform: rotate(360deg);

}

to {

-ms-transform: rotate(0deg);

}

}

@-webkit-keyframes rotateAnim {

from {

-webkit-transform: rotate(360deg);

}

to {

-webkit-transform: rotate(0deg);

}

}

@-moz-keyframes rotateAnim {

from {

-moz-transform: rotate(360deg);

}

to {

-moz-transform: rotate(0deg);

}

}