| Current Path : /home/kamilrogam/komp/2018/180513/DARWIN/EDU/js/ajax/1/public/css/ |
| Current File : /home/kamilrogam/komp/2018/180513/DARWIN/EDU/js/ajax/1/public/css/style.css |
.loader-bg {
position: fixed;
background: #202020;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.loader-element {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 8px solid transparent;
background: #202020;
}
.loader-1 {
width: 80px;
height: 80px;
border-color: #90caf9;
}
.loader-2 {
width: 70px;
height: 69px;
border-color: #2196f3;
}
.loader-3 {
width: 55px;
height: 55px;
border-color: #1565c0;
}
.loader-1:before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
border: 50px solid transparent;
border-top-color: #202020;
border-top-width: 70px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 9;
-webkit-animation: rotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite forwards;
-moz-animation: rotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite forwards;
-o-animation: rotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite forwards;
animation: rotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite forwards;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
margin: -60px 0 0 -50px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0);
transform: rotate(0)
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-o-keyframes rotate {
0% {
-o-transform: rotate(0);
transform: rotate(0)
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
}