kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Added loading bar between each routes

Browse Source
This commit is contained in:
Donald Zou 2024-10-04 17:48:24 +08:00
parent 4833a29e57
commit 27c67ec202
5 changed files with 207 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/static/app/dist/assets/index.css vendored
View File

File diff suppressed because one or more lines are too long

42
src/static/app/dist/assets/index.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/static/app/src/App.vue
View File

@ -24,6 +24,7 @@ const getActiveCrossServer = computed(() => {
</script>
<template>
<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
<div class="container-fluid d-flex text-body align-items-center">
<span class="navbar-brand mb-0 h1">WGDashboard</span>

10
src/static/app/src/router/index.js
View File

@ -33,8 +33,6 @@ const router = createRouter({
top: 0
})
}
},
routes: [
{
@ -145,7 +143,8 @@ router.beforeEach(async (to, from, next) => {
document.title = "WGDashboard"
}
dashboardConfigurationStore.ShowNavBar = false;
document.querySelector(".loadingBar").classList.remove("loadingDone")
document.querySelector(".loadingBar").classList.add("loading")
if (to.meta.requiresAuth){
if (!dashboardConfigurationStore.getActiveCrossServer()){
if (cookie.getCookie("authToken") && await checkAuth()){
@ -171,4 +170,9 @@ router.beforeEach(async (to, from, next) => {
next();
}
});
router.afterEach(() => {
document.querySelector(".loadingBar").classList.remove("loading")
document.querySelector(".loadingBar").classList.add("loadingDone")
})
export default router

33
src/static/css/dashboard.css
View File

@ -1233,3 +1233,36 @@ pre.index-alert {
--bgdegree: 594deg;
}
}
.loadingBar{
background: linear-gradient(var(--degree), var(--brandColor1) var(--distance2), var(--brandColor2) 100%);
}
.loadingBar.loading{
animation: loading cubic-bezier(0.82, 0.58, 0.17, 1) 0.2s forwards;
}
.loadingBar.loadingDone{
animation: loadingDone cubic-bezier(0.82, 0.58, 0.17, 1) 0.5s forwards;
}
@keyframes loading {
from{
opacity: 0;
width: 0%;
}
to{
opacity: 1;
width: 20%;
}
}
@keyframes loadingDone {
from{
opacity: 1;
width: 20%;
}
to{
opacity: 0;
width: 100%;
}
}