70 lines
1.7 KiB
CSS
70 lines
1.7 KiB
CSS
.loading-screen {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 200;
|
|
overflow: hidden;
|
|
background: #030623;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition:
|
|
opacity 320ms ease,
|
|
visibility 0s linear 0s;
|
|
visibility: visible;
|
|
}
|
|
|
|
.loading-screen.is-complete {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 320ms ease,
|
|
visibility 0s linear 320ms;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loading-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.loading-progress {
|
|
position: absolute;
|
|
top: var(--loading-progress-top, 692px);
|
|
left: var(--loading-progress-left, 61px);
|
|
width: var(--loading-progress-width, 253px);
|
|
height: var(--loading-progress-height, 8px);
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 213, 139, 0.76);
|
|
border-radius: 999px;
|
|
background:
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(12, 10, 32, 0.8) 0%,
|
|
rgba(2, 4, 18, 0.92) 100%
|
|
),
|
|
rgba(5, 7, 25, 0.86);
|
|
box-shadow:
|
|
0 0 12px rgba(255, 164, 58, 0.32),
|
|
inset 0 0 7px rgba(0, 0, 0, 0.78);
|
|
}
|
|
|
|
.loading-progress-bar {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, #ff612f 0%, #ffc957 52%, #3ca4ff 100%);
|
|
box-shadow:
|
|
0 0 12px rgba(255, 214, 87, 0.84),
|
|
inset 0 1px 1px rgba(255, 255, 255, 0.45);
|
|
transform: scaleX(var(--loading-progress, 0));
|
|
transform-origin: left center;
|
|
transition: transform 180ms ease;
|
|
}
|