ui: add branded splash loading
This commit is contained in:
@@ -584,10 +584,18 @@ function reloadApp() {
|
||||
<template v-else-if="showInitialAppLoading">
|
||||
<main class="appLoading">
|
||||
<section class="appLoading__card">
|
||||
<div class="appLoading__eyebrow">Loading</div>
|
||||
<h1 class="appLoading__title">접속 정보를 확인하고 있어요.</h1>
|
||||
<p class="appLoading__desc">로그인 상태와 기본 데이터를 확인한 뒤 화면을 보여드릴게요.</p>
|
||||
<div class="appLoading__spinner" aria-hidden="true"></div>
|
||||
<div class="appLoading__brand" aria-hidden="true">
|
||||
<div class="appLoading__logo">
|
||||
<span class="appLoading__logoMain">T</span>
|
||||
<span class="appLoading__logoBar"></span>
|
||||
</div>
|
||||
<span class="appLoading__orb appLoading__orb--mint"></span>
|
||||
<span class="appLoading__orb appLoading__orb--blue"></span>
|
||||
</div>
|
||||
<div class="appLoading__eyebrow">Tier Maker</div>
|
||||
<h1 class="appLoading__title">티어표를 준비하고 있어요</h1>
|
||||
<p class="appLoading__desc">잠시만 기다려 주세요.</p>
|
||||
<div class="appLoading__progress" aria-hidden="true"><span></span></div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -860,6 +868,15 @@ function reloadApp() {
|
||||
var(--theme-shell-bg);
|
||||
}
|
||||
|
||||
.appLoading {
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% 18%, rgba(127, 231, 214, 0.22), transparent 28%),
|
||||
radial-gradient(circle at 26% 76%, rgba(95, 202, 255, 0.18), transparent 30%),
|
||||
radial-gradient(circle at 78% 68%, rgba(167, 139, 250, 0.14), transparent 28%),
|
||||
var(--theme-shell-bg);
|
||||
}
|
||||
|
||||
.backendFallback__card,
|
||||
.appLoading__card {
|
||||
width: min(100%, 560px);
|
||||
@@ -872,6 +889,102 @@ function reloadApp() {
|
||||
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
|
||||
}
|
||||
|
||||
.appLoading__card {
|
||||
position: relative;
|
||||
width: min(100%, 420px);
|
||||
justify-items: center;
|
||||
gap: 14px;
|
||||
padding: 42px 32px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background:
|
||||
linear-gradient(145deg, color-mix(in srgb, var(--theme-card-bg) 92%, white), var(--theme-card-bg)),
|
||||
var(--theme-card-bg);
|
||||
}
|
||||
|
||||
.appLoading__card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -42%;
|
||||
background: conic-gradient(from 90deg, transparent, rgba(127, 231, 214, 0.18), transparent 34%, rgba(95, 202, 255, 0.16), transparent 68%);
|
||||
animation: appLoadingAura 4.8s linear infinite;
|
||||
}
|
||||
|
||||
.appLoading__card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.appLoading__brand {
|
||||
position: relative;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.appLoading__logo {
|
||||
position: relative;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 24px;
|
||||
border: 1px solid color-mix(in srgb, var(--theme-accent-strong) 34%, transparent);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(127, 231, 214, 0.2), rgba(95, 202, 255, 0.12)),
|
||||
color-mix(in srgb, var(--theme-card-bg) 86%, #090d16);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.28),
|
||||
0 0 34px rgba(127, 231, 214, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||
animation: appLoadingFloat 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.appLoading__logoMain {
|
||||
color: var(--theme-accent-strong);
|
||||
font-size: 44px;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.12em;
|
||||
}
|
||||
|
||||
.appLoading__logoBar {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 16px;
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #5fcaff;
|
||||
box-shadow: 0 0 18px rgba(95, 202, 255, 0.54);
|
||||
}
|
||||
|
||||
.appLoading__orb {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
filter: drop-shadow(0 0 12px currentColor);
|
||||
animation: appLoadingOrbit 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.appLoading__orb--mint {
|
||||
top: 10px;
|
||||
right: 18px;
|
||||
color: #7fe7d6;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.appLoading__orb--blue {
|
||||
left: 14px;
|
||||
bottom: 18px;
|
||||
color: #5fcaff;
|
||||
background: currentColor;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.backendFallback__eyebrow,
|
||||
.appLoading__eyebrow {
|
||||
color: var(--theme-accent-strong);
|
||||
@@ -889,6 +1002,10 @@ function reloadApp() {
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.appLoading__title {
|
||||
font-size: clamp(27px, 4vw, 38px);
|
||||
}
|
||||
|
||||
.backendFallback__desc,
|
||||
.appLoading__desc {
|
||||
margin: 0;
|
||||
@@ -897,21 +1014,74 @@ function reloadApp() {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.appLoading__spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
.appLoading__progress {
|
||||
width: min(100%, 220px);
|
||||
height: 6px;
|
||||
margin-top: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
border: 3px solid color-mix(in srgb, var(--theme-text-faint) 34%, transparent);
|
||||
border-top-color: var(--theme-accent-strong);
|
||||
animation: appLoadingSpin 820ms linear infinite;
|
||||
background: color-mix(in srgb, var(--theme-text-faint) 18%, transparent);
|
||||
}
|
||||
|
||||
@keyframes appLoadingSpin {
|
||||
.appLoading__progress span {
|
||||
display: block;
|
||||
width: 42%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #7fe7d6, #5fcaff);
|
||||
box-shadow: 0 0 20px rgba(127, 231, 214, 0.46);
|
||||
animation: appLoadingProgress 1.35s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes appLoadingAura {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appLoadingFloat {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appLoadingOrbit {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(8px, -10px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appLoadingProgress {
|
||||
0% {
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(250%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.appLoading__card::before,
|
||||
.appLoading__logo,
|
||||
.appLoading__orb,
|
||||
.appLoading__progress span {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.backendFallback__actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user