From 154f536c61cb3725dd48b2e0dbd54fb87154a3fb Mon Sep 17 00:00:00 2001 From: eoao Date: Wed, 6 May 2026 00:34:53 +0800 Subject: [PATCH] style: update initial loading indicator --- mail-vue/index.html | 102 ++++++++++++++++++++--------------- mail-vue/src/init/init.js | 14 ----- mail-vue/src/router/index.js | 32 +++++++++-- 3 files changed, 88 insertions(+), 60 deletions(-) diff --git a/mail-vue/index.html b/mail-vue/index.html index 1369ab6..35c66ab 100644 --- a/mail-vue/index.html +++ b/mail-vue/index.html @@ -49,71 +49,89 @@ .loading-icon { display: inline-flex; + flex-direction: column; align-items: center; justify-content: center; - font-size: 30px; + gap: 2px; } - .circular { - height: 30px; - width: 30px; - animation: loading-rotate 1s linear infinite; + .loading-image { + width: 70px; + height: 70px; + object-fit: contain; } - .loading-path .dot1 { - transform: translate(3.75px, 3.75px); - fill: #409EFF; - animation: custom-spin-move 1s infinite linear alternate; - opacity: 0.3; + .loading-progress { + position: relative; + width: 64px; + height: 4px; + overflow: hidden; + border-radius: 999px; + background: rgba(64, 158, 255, 0.18); } - .loading-path .dot2 { - transform: translate(calc(100% - 3.75px), 3.75px); - fill: #409EFF; - animation: custom-spin-move 1s infinite linear alternate; - opacity: 0.3; - animation-delay: 0.4s; + .loading-progress::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: inherit; + background: #409EFF; + transform: scaleX(0); + transform-origin: left center; + animation: loading-progress-grow 2.4s linear forwards; } - .loading-path .dot3 { - transform: translate(3.75px, calc(100% - 3.75px)); - fill: #409EFF; - animation: custom-spin-move 1s infinite linear alternate; - opacity: 0.3; - animation-delay: 1.2s; + .loading-progress::after { + content: ""; + position: absolute; + top: 0; + width: 24px; + height: 100%; + border-radius: inherit; + background: rgba(64, 158, 255, 0.45); + filter: blur(4px); + transform: translateX(-24px); + animation: loading-progress-peg 2.4s linear forwards; } - .loading-path .dot4 { - transform: translate(calc(100% - 3.75px), calc(100% - 3.75px)); - fill: #409EFF; - animation: custom-spin-move 1s infinite linear alternate; - opacity: 0.3; - animation-delay: 0.8s; + .loading-complete .loading-progress::before { + animation: none; + transform: scaleX(1); + transition: transform 200ms linear; } - @keyframes loading-rotate { - to { - transform: rotate(360deg); + .loading-complete .loading-progress::after { + animation: none; + transform: translateX(60px); + transition: transform 200ms linear; + } + + @keyframes loading-progress-grow { + 0% { + transform: scaleX(0); + } + 100% { + transform: scaleX(1); } } - @keyframes custom-spin-move { - to { - opacity: 1; + @keyframes loading-progress-peg { + 0% { + transform: translateX(-24px); + } + 100% { + transform: translateX(60px); } }
- - - - - - - - + Cloud Mail +
diff --git a/mail-vue/src/init/init.js b/mail-vue/src/init/init.js index 79e6b78..c77ad5f 100644 --- a/mail-vue/src/init/init.js +++ b/mail-vue/src/init/init.js @@ -54,18 +54,4 @@ export async function init() { settingStore.domainList = setting.domainList; document.title = setting.title; } - - removeLoading(); } - -function removeLoading() { - if (window.innerWidth < 1025) { - document.documentElement.style.setProperty('--loading-hide-transition', 'none') - } - const doc = document.getElementById('loading-first'); - doc.classList.add('loading-hide') - setTimeout(() => { - doc.remove() - },1000) -} - diff --git a/mail-vue/src/router/index.js b/mail-vue/src/router/index.js index c090a9c..d3cb773 100644 --- a/mail-vue/src/router/index.js +++ b/mail-vue/src/router/index.js @@ -92,9 +92,11 @@ router.beforeEach((to, from, next) => { clearTimeout(timer) } - timer = setTimeout(() => { - NProgress.start() - }, first ? 200 : 100) + if (!first) { + timer = setTimeout(() => { + NProgress.start() + }, 100) + } const token = localStorage.getItem('token') @@ -149,7 +151,11 @@ function loadBackground(next) { router.afterEach((to) => { clearTimeout(timer) - NProgress.done(); + if (first) { + removeLoading() + } else { + NProgress.done(); + } const uiStore = useUiStore() if (to.meta.menu) { @@ -167,4 +173,22 @@ router.afterEach((to) => { first = false }) +function removeLoading() { + if (window.innerWidth < 1025) { + document.documentElement.style.setProperty('--loading-hide-transition', 'none') + } + const doc = document.getElementById('loading-first'); + if (!doc) { + return; + } + + doc.classList.add('loading-complete') + setTimeout(() => { + doc.classList.add('loading-hide') + setTimeout(() => { + doc.remove() + }, 1000) + }, 200) +} + export default router