shumengya/cloud-mail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update initial loading indicator

Browse Source
This commit is contained in:
eoao
2026-05-06 00:34:53 +08:00
parent e92a44b069
commit 154f536c61
3 changed files with 88 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
mail-vue/index.html
View File

@@ -49,71 +49,89 @@
.loading-icon { .loading-icon {
display: inline-flex; display: inline-flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 30px; gap: 2px;
} }
.circular { .loading-image {
height: 30px; width: 70px;
width: 30px; height: 70px;
animation: loading-rotate 1s linear infinite; object-fit: contain;
} }
.loading-path .dot1 { .loading-progress {
transform: translate(3.75px, 3.75px); position: relative;
fill: #409EFF; width: 64px;
animation: custom-spin-move 1s infinite linear alternate; height: 4px;
opacity: 0.3; overflow: hidden;
border-radius: 999px;
background: rgba(64, 158, 255, 0.18);
} }
.loading-path .dot2 { .loading-progress::before {
transform: translate(calc(100% - 3.75px), 3.75px); content: "";
fill: #409EFF; position: absolute;
animation: custom-spin-move 1s infinite linear alternate; left: 0;
opacity: 0.3; top: 0;
animation-delay: 0.4s; 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 { .loading-progress::after {
transform: translate(3.75px, calc(100% - 3.75px)); content: "";
fill: #409EFF; position: absolute;
animation: custom-spin-move 1s infinite linear alternate; top: 0;
opacity: 0.3; width: 24px;
animation-delay: 1.2s; 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 { .loading-complete .loading-progress::before {
transform: translate(calc(100% - 3.75px), calc(100% - 3.75px)); animation: none;
fill: #409EFF; transform: scaleX(1);
animation: custom-spin-move 1s infinite linear alternate; transition: transform 200ms linear;
opacity: 0.3;
animation-delay: 0.8s;
} }
@keyframes loading-rotate { .loading-complete .loading-progress::after {
to { animation: none;
transform: rotate(360deg); transform: translateX(60px);
transition: transform 200ms linear;
}
@keyframes loading-progress-grow {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
} }
} }
@keyframes custom-spin-move { @keyframes loading-progress-peg {
to { 0% {
opacity: 1; transform: translateX(-24px);
}
100% {
transform: translateX(60px);
} }
} }
</style> </style>
<body> <body>
<div id="loading-first" > <div id="loading-first" >
<div class="loading-icon"> <div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20"> <img class="loading-image" src="/mail-pwa.png" alt="Cloud Mail">
<g class="loading-path"> <div class="loading-progress" aria-hidden="true"></div>
<circle r="3.375" class="dot1" rx="0" ry="0"/>
<circle r="3.375" class="dot2" rx="0" ry="0"/>
<circle r="3.375" class="dot4" rx="0" ry="0"/>
<circle r="3.375" class="dot3" rx="0" ry="0"/>
</g>
</svg>
</div> </div>
</div> </div>
<div id="app"></div> <div id="app"></div>

14
mail-vue/src/init/init.js
View File

@@ -54,18 +54,4 @@ export async function init() {
settingStore.domainList = setting.domainList; settingStore.domainList = setting.domainList;
document.title = setting.title; 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)
}

32
mail-vue/src/router/index.js
View File

@@ -92,9 +92,11 @@ router.beforeEach((to, from, next) => {
clearTimeout(timer) clearTimeout(timer)
} }
timer = setTimeout(() => { if (!first) {
NProgress.start() timer = setTimeout(() => {
}, first ? 200 : 100) NProgress.start()
}, 100)
}
const token = localStorage.getItem('token') const token = localStorage.getItem('token')
@@ -149,7 +151,11 @@ function loadBackground(next) {
router.afterEach((to) => { router.afterEach((to) => {
clearTimeout(timer) clearTimeout(timer)
NProgress.done(); if (first) {
removeLoading()
} else {
NProgress.done();
}
const uiStore = useUiStore() const uiStore = useUiStore()
if (to.meta.menu) { if (to.meta.menu) {
@@ -167,4 +173,22 @@ router.afterEach((to) => {
first = false 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 export default router