64 lines
1.1 KiB
CSS
64 lines
1.1 KiB
CSS
|
/* ---- BEGIN loading spinner ---- */
|
||
|
|
#loading .spinner {
|
||
|
|
margin: 100px auto;
|
||
|
|
width: 50px;
|
||
|
|
height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading .spinner > div {
|
||
|
|
background-color: #333;
|
||
|
|
height: 100%;
|
||
|
|
width: 6px;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||
|
|
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading .spinner .rect2 {
|
||
|
|
-webkit-animation-delay: -1.1s;
|
||
|
|
animation-delay: -1.1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading .spinner .rect3 {
|
||
|
|
-webkit-animation-delay: -1s;
|
||
|
|
animation-delay: -1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading .spinner .rect4 {
|
||
|
|
-webkit-animation-delay: -0.9s;
|
||
|
|
animation-delay: -0.9s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading .spinner .rect5 {
|
||
|
|
-webkit-animation-delay: -0.8s;
|
||
|
|
animation-delay: -0.8s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes sk-stretchdelay {
|
||
|
|
0%,
|
||
|
|
40%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scaleY(0.4);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scaleY(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes sk-stretchdelay {
|
||
|
|
0%,
|
||
|
|
40%,
|
||
|
|
100% {
|
||
|
|
transform: scaleY(0.4);
|
||
|
|
-webkit-transform: scaleY(0.4);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
transform: scaleY(1);
|
||
|
|
-webkit-transform: scaleY(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* ---- END loading spinner ---- */
|