mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-01 19:48:15 +08:00
refactor: 优化全局loading
This commit is contained in:
Hooray Hu
parent
dac7f4b0c1
commit
b3cfb95f59
10
index.html
10
index.html
@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/loading.css" />
|
||||
<link rel="stylesheet" href="/browser_upgrade/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Expires" content="0">
|
||||
@ -14,15 +13,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="fantastic-admin-home">
|
||||
<div class="loading">
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
</div>
|
||||
<div class="text">载入中</div>
|
||||
</div>
|
||||
<div id="browser-upgrade">
|
||||
<div class="title">为了您的体验，推荐使用以下浏览器</div>
|
||||
<div class="browsers">
|
||||
|
||||
197
loading.html
Normal file
197
loading.html
Normal file
@ -0,0 +1,197 @@
|
||||
<style>
|
||||
@keyframes rainbow {
|
||||
0% { --rainbow-color: #00a98e; }
|
||||
1.25% { --rainbow-color: #00a996; }
|
||||
2.5% { --rainbow-color: #00a99f; }
|
||||
3.75% { --rainbow-color: #00a9a7; }
|
||||
5% { --rainbow-color: #00a9b0; }
|
||||
6.25% { --rainbow-color: #00a9b8; }
|
||||
7.5% { --rainbow-color: #00a9c0; }
|
||||
8.75% { --rainbow-color: #00a8c7; }
|
||||
10% { --rainbow-color: #00a8cf; }
|
||||
11.25% { --rainbow-color: #00a7d5; }
|
||||
12.5% { --rainbow-color: #00a6dc; }
|
||||
13.75% { --rainbow-color: #00a6e2; }
|
||||
15% { --rainbow-color: #00a4e7; }
|
||||
16.25% { --rainbow-color: #00a3ec; }
|
||||
17.5% { --rainbow-color: #00a2f1; }
|
||||
18.75% { --rainbow-color: #00a0f4; }
|
||||
20% { --rainbow-color: #009ff7; }
|
||||
21.25% { --rainbow-color: #009dfa; }
|
||||
22.5% { --rainbow-color: #009bfc; }
|
||||
23.75% { --rainbow-color: #0098fd; }
|
||||
25% { --rainbow-color: #0096fd; }
|
||||
26.25% { --rainbow-color: #0093fd; }
|
||||
27.5% { --rainbow-color: #2e90fc; }
|
||||
28.75% { --rainbow-color: #4d8dfa; }
|
||||
30% { --rainbow-color: #638af8; }
|
||||
31.25% { --rainbow-color: #7587f5; }
|
||||
32.5% { --rainbow-color: #8583f1; }
|
||||
33.75% { --rainbow-color: #9280ed; }
|
||||
35% { --rainbow-color: #9f7ce9; }
|
||||
36.25% { --rainbow-color: #aa78e3; }
|
||||
37.5% { --rainbow-color: #b574dd; }
|
||||
38.75% { --rainbow-color: #be71d7; }
|
||||
40% { --rainbow-color: #c76dd1; }
|
||||
41.25% { --rainbow-color: #cf69c9; }
|
||||
42.5% { --rainbow-color: #d566c2; }
|
||||
43.75% { --rainbow-color: #dc63ba; }
|
||||
45% { --rainbow-color: #e160b3; }
|
||||
46.25% { --rainbow-color: #e65eab; }
|
||||
47.5% { --rainbow-color: #e95ca2; }
|
||||
48.75% { --rainbow-color: #ed5a9a; }
|
||||
50% { --rainbow-color: #ef5992; }
|
||||
51.25% { --rainbow-color: #f15989; }
|
||||
52.5% { --rainbow-color: #f25981; }
|
||||
53.75% { --rainbow-color: #f25a79; }
|
||||
55% { --rainbow-color: #f25c71; }
|
||||
56.25% { --rainbow-color: #f15e69; }
|
||||
57.5% { --rainbow-color: #ef6061; }
|
||||
58.75% { --rainbow-color: #ed635a; }
|
||||
60% { --rainbow-color: #eb6552; }
|
||||
61.25% { --rainbow-color: #e8694b; }
|
||||
62.5% { --rainbow-color: #e46c44; }
|
||||
63.75% { --rainbow-color: #e06f3d; }
|
||||
65% { --rainbow-color: #db7336; }
|
||||
66.25% { --rainbow-color: #d77630; }
|
||||
67.5% { --rainbow-color: #d17a2a; }
|
||||
68.75% { --rainbow-color: #cc7d24; }
|
||||
70% { --rainbow-color: #c6811e; }
|
||||
71.25% { --rainbow-color: #bf8418; }
|
||||
72.5% { --rainbow-color: #b98713; }
|
||||
73.75% { --rainbow-color: #b28a0f; }
|
||||
75% { --rainbow-color: #ab8d0c; }
|
||||
76.25% { --rainbow-color: #a3900b; }
|
||||
77.5% { --rainbow-color: #9c920d; }
|
||||
78.75% { --rainbow-color: #949510; }
|
||||
80% { --rainbow-color: #8b9715; }
|
||||
81.25% { --rainbow-color: #83991b; }
|
||||
82.5% { --rainbow-color: #7a9b21; }
|
||||
83.75% { --rainbow-color: #719d27; }
|
||||
85% { --rainbow-color: #679e2e; }
|
||||
86.25% { --rainbow-color: #5da035; }
|
||||
87.5% { --rainbow-color: #51a13c; }
|
||||
88.75% { --rainbow-color: #44a244; }
|
||||
90% { --rainbow-color: #34a44b; }
|
||||
91.25% { --rainbow-color: #1ba553; }
|
||||
92.5% { --rainbow-color: #00a65b; }
|
||||
93.75% { --rainbow-color: #00a663; }
|
||||
95% { --rainbow-color: #00a76c; }
|
||||
96.25% { --rainbow-color: #00a874; }
|
||||
97.5% { --rainbow-color: #00a87d; }
|
||||
98.75% { --rainbow-color: #00a985; }
|
||||
100% { --rainbow-color: #00a98e; }
|
||||
}
|
||||
|
||||
:root {
|
||||
--rainbow-color: #00a98e;
|
||||
animation: rainbow 20s linear infinite;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--rainbow-color);
|
||||
user-select: none;
|
||||
background-color: snow;
|
||||
}
|
||||
|
||||
.loading-container .loading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.loading-container .loading .square {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.loading-container .loading .square::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border: 3px solid var(--rainbow-color);
|
||||
border-radius: 15%;
|
||||
animation: square-to-dot-animation 2s linear infinite;
|
||||
}
|
||||
|
||||
.loading-container .loading .square:nth-child(1)::before {
|
||||
animation-delay: calc(150ms * 1);
|
||||
}
|
||||
|
||||
.loading-container .loading .square:nth-child(2)::before {
|
||||
animation-delay: calc(150ms * 2);
|
||||
}
|
||||
|
||||
.loading-container .loading .square:nth-child(3)::before {
|
||||
animation-delay: calc(150ms * 3);
|
||||
}
|
||||
|
||||
.loading-container .loading .square:nth-child(4)::before {
|
||||
animation-delay: calc(150ms * 4);
|
||||
}
|
||||
|
||||
@keyframes square-to-dot-animation {
|
||||
15%,
|
||||
25% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 5px;
|
||||
border-width: 5px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: initial;
|
||||
border-width: 3px;
|
||||
border-radius: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container .name {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.loading-container .tips {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loading-container .tips::after {
|
||||
position: absolute;
|
||||
padding-left: 5px;
|
||||
content: "…";
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="loading-container">
|
||||
<div class="loading">
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
<div class="square"></div>
|
||||
</div>
|
||||
<div class="name">%VITE_APP_TITLE%</div>
|
||||
<div class="tips">载入中</div>
|
||||
</div>
|
||||
@ -1,92 +0,0 @@
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fantastic-admin-home {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #736477;
|
||||
user-select: none;
|
||||
background-color: snow;
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border: 3px solid #8c858f;
|
||||
border-radius: 15%;
|
||||
animation: square-to-dot-animation 2s linear infinite;
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square:nth-child(1)::before {
|
||||
animation-delay: calc(150ms * 1);
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square:nth-child(2)::before {
|
||||
animation-delay: calc(150ms * 2);
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square:nth-child(3)::before {
|
||||
animation-delay: calc(150ms * 3);
|
||||
}
|
||||
|
||||
.fantastic-admin-home .loading .square:nth-child(4)::before {
|
||||
animation-delay: calc(150ms * 4);
|
||||
}
|
||||
|
||||
@keyframes square-to-dot-animation {
|
||||
15%,
|
||||
25% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 5px;
|
||||
border-width: 5px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: initial;
|
||||
border-width: 3px;
|
||||
border-radius: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
.fantastic-admin-home .text {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.fantastic-admin-home .text::after {
|
||||
position: absolute;
|
||||
padding-left: 5px;
|
||||
content: "…";
|
||||
}
|
||||
@ -91,6 +91,10 @@ body {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
|
||||
[data-fixed-calc-width] {
|
||||
position: fixed;
|
||||
|
||||
@ -124,6 +124,35 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
|
||||
}
|
||||
})(),
|
||||
|
||||
{
|
||||
name: 'vite-plugin-loading',
|
||||
enforce: 'pre',
|
||||
transformIndexHtml: {
|
||||
handler: async html => html.replace(/<\/body>/, `${
|
||||
`<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
|
||||
}</body>`),
|
||||
order: 'pre',
|
||||
},
|
||||
transform: (code, id) => {
|
||||
if (/src\/main.ts$/.test(id)) {
|
||||
code = code.concat(`
|
||||
const loadingEl = document.querySelector('[data-app-loading]')
|
||||
if (loadingEl) {
|
||||
loadingEl.style['pointer-events'] = 'none'
|
||||
loadingEl.style.visibility = 'hidden'
|
||||
loadingEl.style.opacity = 0
|
||||
loadingEl.style.transition = 'all 0.5s ease-out'
|
||||
loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
|
||||
}
|
||||
`)
|
||||
return {
|
||||
code,
|
||||
map: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// https://github.com/unplugin/unplugin-turbo-console
|
||||
TurboConsole(),
|
||||
|
||||
@ -138,6 +167,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
|
||||
|
||||
{
|
||||
name: 'vite-plugin-debug-plugin',
|
||||
enforce: 'pre',
|
||||
transform: (code, id) => {
|
||||
if (/src\/main.ts$/.test(id)) {
|
||||
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
|
||||
@ -162,6 +192,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
|
||||
|
||||
{
|
||||
name: 'vite-plugin-disable-devtool',
|
||||
enforce: 'pre',
|
||||
transform: (code, id) => {
|
||||
if (/src\/main.ts$/.test(id)) {
|
||||
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user