.loading {
display: none;
}
.loading {
display: block;
background: #fff;
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
margin: auto;
z-index: 9999999;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loading .loading-logo {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 40%;
}
.loading .loading-term {
display: block;
position: absolute;
bottom: 23px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.loading .loading-term span {
color: #254a9a;
font-size: 35px;
}
.loading-indicator {
width: 17%;
height: 5px;
background: #fdd804;
position: absolute;
bottom: 0;
-webkit-animation: loading 2.3s infinite;
animation: loading 2.3s infinite;
}
.loading.loaded {
opacity: 0;
visibility: hidden;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: translatex(-100vw);
transform: translatex(-100vw);
}
100% {
-webkit-transform: translatex(100vw);
transform: translatex(100vw);
}
}
@keyframes loading {
0% {
-webkit-transform: translatex(-100vw);
transform: translatex(-100vw);
}
100% {
-webkit-transform: translatex(100vw);
transform: translatex(100vw);
}
}
.loading-screen {
background: #fff;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
.loading-screen.loaded {
background: transparent;
visibility: hidden;
opacity: 0;
-webkit-transition: 1s linear;
transition: 1s linear;
}
@media only screen and (max-width: 1400px) {
.loading .loading-logo {
max-width: 50%;
}
}
@media only screen and (max-width: 900px) {
.loading .loading-logo {
max-width: 70%;
}
}
@media only screen and (max-width: 600px) {
.loading .loading-logo {
max-width: 90%;
}