.preloader {
background: #9c27b0 none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
}
.loader {
animation: 2.3s ease 0s normal none infinite running cssload-loader;
border: 3px solid #fff;
border-radius: 50px;
display: block;
height: 40px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0px, -50%);
width: 40px;
}
.loader-inner {
animation: 2.3s ease-in 0s normal none infinite running cssload-loader-inner;
background-color: #fff;
display: inline-block;
vertical-align: top;
border-radius: 50px;
width: 100%;
}
.loaded .preloader {
opacity: 0;
transition: all 0.2s ease-out 0s;
visibility: hidden;
border-radius: 50px;
}
@keyframes cssload-loader {
0% {
transform: rotate(0deg);
}
25%, 50% {
transform: rotate(180deg);
}
100%, 75% {
transform: rotate(360deg);
}
}
@keyframes cssload-loader {
0% {
transform: rotate(0deg);
}
25%, 50% {
transform: rotate(180deg);
}
100%, 75% {
transform: rotate(360deg);
}
}
@keyframes cssload-loader-inner {
0%, 100%, 25% {
height: 0;
}
50%, 75% {
height: 100%;
}
}
@keyframes cssload-loader-inner {
0%, 100%, 25% {
height: 0;
}
50%, 75% {
height: 100%;
}
}
|