html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.page-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background-color: #0D2343;
}
.loading-wrapper {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0D2343;
display: flex;
}
.loading {
opacity: .75;
margin: auto;
flex: none;
}
.loading-logo {
width: 180px;
height: 129px;
background: url('data:image/svg+xml;utf8,') center center no-repeat;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.loading-logo::after {
display: block;
content: '';
width: 360px;
height: 360px;
margin: -115px -90px;
transform: rotate(45deg);
background: linear-gradient(90deg, rgba(13, 35, 67, 0.5) 25%, transparent 50%, transparent 50%, rgba(13, 35, 67, 0.5) 75%);
background-size: 400% 400%;
-webkit-animation: flicker 3s linear infinite;
animation: flicker 3s linear infinite;
}
.loading-label {
color: #B7C0CD;
font: 18px Roboto;
font-weight: 500;
text-transform: uppercase;
text-align: center;
position: relative;
line-height: 24px;
height: 24px;
}
.loading-label::after {
display: inline-block;
content: '\2026';
overflow: hidden;
width: 0;
position: absolute;
text-align: left;
font-size: 30px;
line-height: 16px;
padding-bottom: 5px;
-webkit-animation: ellipsis steps(4,end) 2s infinite;
animation: ellipsis steps(4,end) 2s infinite;
}
@keyframes ellipsis {
to {
width: 1em;
}
}
@keyframes flicker {
from {
background-position: 100% 0;
}
to {
background-position: 0 0;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1em;
}
}
@-webkit-keyframes flicker {
from {
background-position: 100% 0;
}
to {
background-position: 0 0;
}
}