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 {
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);
}
}
</style>
<body>
<div id="loading-first" >
<div class="loading-icon">
<svg class="circular" viewBox="0 0 20 20">
<g class="loading-path">
<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>
<img class="loading-image" src="/mail-pwa.png" alt="Cloud Mail">
<div class="loading-progress" aria-hidden="true"></div>
</div>
</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;
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)
}
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