CSS
body{
background-color: #000;
}
.cssload-wrap {
position: absolute;
margin: 300px auto 0;
left: 50%;
margin-left: -420px;
transform: rotateX(75deg);
}
.cssload-circle {
position: absolute;
float: left;
border: 2px solid white;
animation: bounce 1.73s infinite ease-in-out alternate;
-o-animation: bounce 1.73s infinite ease-in-out alternate;
-ms-animation: bounce 1.73s infinite ease-in-out alternate;
-webkit-animation: bounce 1.73s infinite ease-in-out alternate;
-moz-animation: bounce 1.73s infinite ease-in-out alternate;
border-radius: 100%;
background: transparent;
top: -141px;
left: -141px;
}
.cssload-circle:nth-child(1) {
margin: 0 553px;
width: 19px;
height: 19px;
animation-delay: 115ms;
-o-animation-delay: 115ms;
-ms-animation-delay: 115ms;
-webkit-animation-delay: 115ms;
-moz-animation-delay: 115ms;
z-index: -1;
border: 2px solid rgba(255,43,0,0.7);
}
.cssload-circle:nth-child(2) {
margin: 0 544px;
width: 38px;
height: 38px;
animation-delay: 230ms;
-o-animation-delay: 230ms;
-ms-animation-delay: 230ms;
-webkit-animation-delay: 230ms;
-moz-animation-delay: 230ms;
z-index: -2;
border: 2px solid rgba(255,85,0,0.7);
}
.cssload-circle:nth-child(3) {
margin: 0 534px;
width: 56px;
height: 56px;
animation-delay: 345ms;
-o-animation-delay: 345ms;
-ms-animation-delay: 345ms;
-webkit-animation-delay: 345ms;
-moz-animation-delay: 345ms;
z-index: -3;
border: 2px solid rgba(255,128,0,0.7);
}
.cssload-circle:nth-child(4) {
margin: 0 525px;
width: 75px;
height: 75px;
animation-delay: 460ms;
-o-animation-delay: 460ms;
-ms-animation-delay: 460ms;
-webkit-animation-delay: 460ms;
-moz-animation-delay: 460ms;
z-index: -4;
border: 2px solid rgba(255,170,0,0.7);
}
.cssload-circle:nth-child(5) {
margin: 0 516px;
width: 94px;
height: 94px;
animation-delay: 575ms;
-o-animation-delay: 575ms;
-ms-animation-delay: 575ms;
-webkit-animation-delay: 575ms;
-moz-animation-delay: 575ms;
z-index: -5;
border: 2px solid rgba(255,213,0,0.7);
}
.cssload-circle:nth-child(6) {
margin: 0 506px;
width: 113px;
height: 113px;
animation-delay: 690ms;
-o-animation-delay: 690ms;
-ms-animation-delay: 690ms;
-webkit-animation-delay: 690ms;
-moz-animation-delay: 690ms;
z-index: -6;
border: 2px solid rgba(255,255,0,0.7);
}
.cssload-circle:nth-child(7) {
margin: 0 497px;
width: 131px;
height: 131px;
animation-delay: 805ms;
-o-animation-delay: 805ms;
-ms-animation-delay: 805ms;
-webkit-animation-delay: 805ms;
-moz-animation-delay: 805ms;
z-index: -7;
border: 2px solid rgba(212,255,0,0.7);
}
.cssload-circle:nth-child(8) {
margin: 0 488px;
width: 150px;
height: 150px;
animation-delay: 920ms;
-o-animation-delay: 920ms;
-ms-animation-delay: 920ms;
-webkit-animation-delay: 920ms;
-moz-animation-delay: 920ms;
z-index: -8;
border: 2px solid rgba(170,255,0,0.7);
}
.cssload-circle:nth-child(9) {
margin: 0 478px;
width: 169px;
height: 169px;
animation-delay: 1035ms;
-o-animation-delay: 1035ms;
-ms-animation-delay: 1035ms;
-webkit-animation-delay: 1035ms;
-moz-animation-delay: 1035ms;
z-index: -9;
border: 2px solid rgba(128,255,0,0.7);
}
.cssload-circle:nth-child(10) {
margin: 0 469px;
width: 188px;
height: 188px;
animation-delay: 1150ms;
-o-animation-delay: 1150ms;
-ms-animation-delay: 1150ms;
-webkit-animation-delay: 1150ms;
-moz-animation-delay: 1150ms;
z-index: -10;
border: 2px solid rgba(85,255,0,0.7);
}
.cssload-circle:nth-child(11) {
margin: 0 459px;
width: 206px;
height: 206px;
animation-delay: 1265ms;
-o-animation-delay: 1265ms;
-ms-animation-delay: 1265ms;
-webkit-animation-delay: 1265ms;
-moz-animation-delay: 1265ms;
z-index: -11;
border: 2px solid rgba(43,255,0,0.7);
}
.cssload-circle:nth-child(12) {
margin: 0 450px;
width: 225px;
height: 225px;
animation-delay: 1380ms;
-o-animation-delay: 1380ms;
-ms-animation-delay: 1380ms;
-webkit-animation-delay: 1380ms;
-moz-animation-delay: 1380ms;
z-index: -12;
border: 2px solid rgba(0,255,0,0.7);
}
.cssload-circle:nth-child(13) {
margin: 0 441px;
width: 244px;
height: 244px;
animation-delay: 1495ms;
-o-animation-delay: 1495ms;
-ms-animation-delay: 1495ms;
-webkit-animation-delay: 1495ms;
-moz-animation-delay: 1495ms;
z-index: -13;
border: 2px solid rgba(0,255,43,0.7);
}
.cssload-circle:nth-child(14) {
margin: 0 431px;
width: 263px;
height: 263px;
animation-delay: 1610ms;
-o-animation-delay: 1610ms;
-ms-animation-delay: 1610ms;
-webkit-animation-delay: 1610ms;
-moz-animation-delay: 1610ms;
z-index: -14;
border: 2px solid rgba(0,255,85,0.7);
}
.cssload-circle:nth-child(15) {
margin: 0 422px;
width: 281px;
height: 281px;
animation-delay: 1725ms;
-o-animation-delay: 1725ms;
-ms-animation-delay: 1725ms;
-webkit-animation-delay: 1725ms;
-moz-animation-delay: 1725ms;
z-index: -15;
border: 2px solid rgba(0,255,128,0.7);
}
.cssload-circle:nth-child(16) {
margin: 0 413px;
width: 300px;
height: 300px;
animation-delay: 1840ms;
-o-animation-delay: 1840ms;
-ms-animation-delay: 1840ms;
-webkit-animation-delay: 1840ms;
-moz-animation-delay: 1840ms;
z-index: -16;
border: 2px solid rgba(0,255,170,0.7);
}
.cssload-circle:nth-child(17) {
margin: 0 403px;
width: 319px;
height: 319px;
animation-delay: 1955ms;
-o-animation-delay: 1955ms;
-ms-animation-delay: 1955ms;
-webkit-animation-delay: 1955ms;
-moz-animation-delay: 1955ms;
z-index: -17;
border: 2px solid rgba(0, 255, 213, 0.7);
}
.cssload-circle:nth-child(18) {
margin: 0 394px;
width: 338px;
height: 338px;
animation-delay: 2070ms;
-o-animation-delay: 2070ms;
-ms-animation-delay: 2070ms;
-webkit-animation-delay: 2070ms;
-moz-animation-delay: 2070ms;
z-index: -18;
border: 2px solid rgba(0, 255, 255, 0.7);
}
.cssload-circle:nth-child(19) {
margin: 0 384px;
width: 356px;
height: 356px;
animation-delay: 2185ms;
-o-animation-delay: 2185ms;
-ms-animation-delay: 2185ms;
-webkit-animation-delay: 2185ms;
-moz-animation-delay: 2185ms;
z-index: -19;
border: 2px solid rgba(0, 212, 255, 0.7);
}
.cssload-circle:nth-child(20) {
margin: 0 375px;
width: 375px;
height: 375px;
animation-delay: 2300ms;
-o-animation-delay: 2300ms;
-ms-animation-delay: 2300ms;
-webkit-animation-delay: 2300ms;
-moz-animation-delay: 2300ms;
z-index: -20;
border: 2px solid rgba(0, 170, 255, 0.7);
}
.cssload-circle:nth-child(21) {
margin: 0 366px;
width: 394px;
height: 394px;
animation-delay: 2415ms;
-o-animation-delay: 2415ms;
-ms-animation-delay: 2415ms;
-webkit-animation-delay: 2415ms;
-moz-animation-delay: 2415ms;
z-index: -21;
border: 2px solid rgba(0, 127, 255, 0.7);
}
.cssload-circle:nth-child(22) {
margin: 0 356px;
width: 413px;
height: 413px;
animation-delay: 2530ms;
-o-animation-delay: 2530ms;
-ms-animation-delay: 2530ms;
-webkit-animation-delay: 2530ms;
-moz-animation-delay: 2530ms;
z-index: -22;
border: 2px solid rgba(0, 85, 255, 0.7);
}
.cssload-circle:nth-child(23) {
margin: 0 347px;
width: 431px;
height: 431px;
animation-delay: 2645ms;
-o-animation-delay: 2645ms;
-ms-animation-delay: 2645ms;
-webkit-animation-delay: 2645ms;
-moz-animation-delay: 2645ms;
z-index: -23;
border: 2px solid rgba(0, 43, 255, 0.7);
}
.cssload-circle:nth-child(24) {
margin: 0 338px;
width: 450px;
height: 450px;
animation-delay: 2760ms;
-o-animation-delay: 2760ms;
-ms-animation-delay: 2760ms;
-webkit-animation-delay: 2760ms;
-moz-animation-delay: 2760ms;
z-index: -24;
border: 2px solid rgba(0, 0, 255, 0.7);
}
.cssload-circle:nth-child(25) {
margin: 0 328px;
width: 469px;
height: 469px;
animation-delay: 2875ms;
-o-animation-delay: 2875ms;
-ms-animation-delay: 2875ms;
-webkit-animation-delay: 2875ms;
-moz-animation-delay: 2875ms;
z-index: -25;
border: 2px solid rgba(42, 0, 255, 0.7);
}
.cssload-circle:nth-child(26) {
margin: 0 319px;
width: 488px;
height: 488px;
animation-delay: 2990ms;
-o-animation-delay: 2990ms;
-ms-animation-delay: 2990ms;
-webkit-animation-delay: 2990ms;
-moz-animation-delay: 2990ms;
z-index: -26;
border: 2px solid rgba(85, 0, 255, 0.7);
}
.cssload-circle:nth-child(27) {
margin: 0 309px;
width: 506px;
height: 506px;
animation-delay: 3105ms;
-o-animation-delay: 3105ms;
-ms-animation-delay: 3105ms;
-webkit-animation-delay: 3105ms;
-moz-animation-delay: 3105ms;
z-index: -27;
border: 2px solid rgba(127, 0, 255, 0.7);
}
.cssload-circle:nth-child(28) {
margin: 0 300px;
width: 525px;
height: 525px;
animation-delay: 3220ms;
-o-animation-delay: 3220ms;
-ms-animation-delay: 3220ms;
-webkit-animation-delay: 3220ms;
-moz-animation-delay: 3220ms;
z-index: -28;
border: 2px solid rgba(170, 0, 255, 0.7);
}
.cssload-circle:nth-child(29) {
margin: 0 291px;
width: 544px;
height: 544px;
animation-delay: 3335ms;
-o-animation-delay: 3335ms;
-ms-animation-delay: 3335ms;
-webkit-animation-delay: 3335ms;
-moz-animation-delay: 3335ms;
z-index: -29;
border: 2px solid rgba(212, 0, 255, 0.7);
}
.cssload-circle:nth-child(30) {
margin: 0 281px;
width: 563px;
height: 563px;
animation-delay: 3450ms;
-o-animation-delay: 3450ms;
-ms-animation-delay: 3450ms;
-webkit-animation-delay: 3450ms;
-moz-animation-delay: 3450ms;
z-index: -30;
border: 2px solid rgba(255, 0, 255, 0.7);
}
@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(188px);
}
}
@-o-keyframes bounce {
0% {
-o-transform: translateY(0px);
}
100% {
-o-transform: translateY(188px);
}
}
@-ms-keyframes bounce {
0% {
-ms-transform: translateY(0px);
}
100% {
-ms-transform: translateY(188px);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(188px);
}
}
@-moz-keyframes bounce {
0% {
-moz-transform: translateY(0px);
}
100% {
-moz-transform: translateY(188px);
}
}
1 Response