63 lines
778 B
CSS
63 lines
778 B
CSS
|
@keyframes loader {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
25% {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loader-inner {
|
||
|
|
0% {
|
||
|
|
height: 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
25% {
|
||
|
|
height: 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
height: 0%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader-inner {
|
||
|
|
vertical-align: top;
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
animation: loader-inner 2s infinite ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
display: block;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin: 60px auto;
|
||
|
|
position: relative;
|
||
|
|
border-width: 4px;
|
||
|
|
border-style: solid;
|
||
|
|
-webkit-animation: loader 2s infinite ease;
|
||
|
|
animation: loader 2s infinite ease;
|
||
|
|
}
|