130 lines
2.7 KiB
CSS
130 lines
2.7 KiB
CSS
body {
|
|
background-color: #B7EBF0;
|
|
}
|
|
|
|
@-moz-keyframes loader {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
opacity: 1;
|
|
}
|
|
45% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes loader {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
opacity: 1;
|
|
}
|
|
45% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes loader {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
opacity: 1;
|
|
}
|
|
45% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.loader {
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 98px;
|
|
height: 159px;
|
|
position: absolute;
|
|
top: 50%;
|
|
top: calc(50% - 80px - 79px);
|
|
top: -webkit-calc(50% - 80px - 79px);
|
|
top: -moz-calc(50% - 80px - 79px);
|
|
bottom: 0;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
margin-left: 272px;
|
|
}
|
|
.loader-i {
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
|
opacity: 0;
|
|
position: absolute;
|
|
background-image: url(../img/loader.png);
|
|
}
|
|
.loader-i_left-bottom {
|
|
-moz-animation: loader 12s linear 4s infinite forwards;
|
|
-webkit-animation: loader 12s linear 4s infinite forwards;
|
|
animation: loader 12s linear 4s infinite forwards;
|
|
left: 0px;
|
|
top: 90px;
|
|
width: 49px;
|
|
height: 69px;
|
|
background-position: 0 0;
|
|
}
|
|
.loader-i_left-center {
|
|
-moz-animation: loader 12s linear 2s infinite forwards;
|
|
-webkit-animation: loader 12s linear 2s infinite forwards;
|
|
animation: loader 12s linear 2s infinite forwards;
|
|
left: 0px;
|
|
top: 59px;
|
|
width: 49px;
|
|
height: 52px;
|
|
background-position: -49px 0;
|
|
}
|
|
.loader-i_left-top {
|
|
-moz-animation: loader 12s linear 0s infinite forwards;
|
|
-webkit-animation: loader 12s linear 0s infinite forwards;
|
|
animation: loader 12s linear 0s infinite forwards;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 49px;
|
|
height: 81px;
|
|
background-position: -98px 0;
|
|
}
|
|
.loader-i_right-bottom {
|
|
-moz-animation: loader 12s linear 5s infinite forwards;
|
|
-webkit-animation: loader 12s linear 5s infinite forwards;
|
|
animation: loader 12s linear 5s infinite forwards;
|
|
left: 49px;
|
|
top: 90px;
|
|
width: 49px;
|
|
height: 69px;
|
|
background-position: -147px 0;
|
|
}
|
|
.loader-i_right-center {
|
|
-moz-animation: loader 12s linear 3s infinite forwards;
|
|
-webkit-animation: loader 12s linear 3s infinite forwards;
|
|
animation: loader 12s linear 3s infinite forwards;
|
|
left: 49px;
|
|
top: 59px;
|
|
width: 49px;
|
|
height: 52px;
|
|
background-position: -196px 0;
|
|
}
|
|
.loader-i_right-top {
|
|
-moz-animation: loader 12s linear 1s infinite forwards;
|
|
-webkit-animation: loader 12s linear 1s infinite forwards;
|
|
animation: loader 12s linear 1s infinite forwards;
|
|
left: 49px;
|
|
top: 0px;
|
|
width: 49px;
|
|
height: 81px;
|
|
background-position: -245px 0;
|
|
}
|