Skip to content

Commit 575fcce

Browse files
hoorayhooray
committed
refactor: 优化全局loading
1 parent f632a1c commit 575fcce

File tree

5 files changed

+232
-102
lines changed

5 files changed

+232
-102
lines changed

‎index.html‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,12 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/favicon.ico" />
6-
<link rel="stylesheet" href="/loading.css" />
76
<link rel="stylesheet" href="/browser_upgrade/index.css" />
87
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
98
<title>%VITE_APP_TITLE%</title>
109
</head>
1110
<body>
1211
<div id="app">
13-
<div class="one-step-admin-home">
14-
<div class="loading">
15-
<div class="square"></div>
16-
<div class="square"></div>
17-
<div class="square"></div>
18-
<div class="square"></div>
19-
</div>
20-
<div class="text">载入中</div>
21-
</div>
2212
<div id="browser-upgrade">
2313
<div class="title">为了您的体验，推荐使用以下浏览器</div>
2414
<div class="browsers">

‎loading.html‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<style>
2+
@keyframes rainbow {
3+
0% { --rainbow-color: #00a98e; }
4+
1.25% { --rainbow-color: #00a996; }
5+
2.5% { --rainbow-color: #00a99f; }
6+
3.75% { --rainbow-color: #00a9a7; }
7+
5% { --rainbow-color: #00a9b0; }
8+
6.25% { --rainbow-color: #00a9b8; }
9+
7.5% { --rainbow-color: #00a9c0; }
10+
8.75% { --rainbow-color: #00a8c7; }
11+
10% { --rainbow-color: #00a8cf; }
12+
11.25% { --rainbow-color: #00a7d5; }
13+
12.5% { --rainbow-color: #00a6dc; }
14+
13.75% { --rainbow-color: #00a6e2; }
15+
15% { --rainbow-color: #00a4e7; }
16+
16.25% { --rainbow-color: #00a3ec; }
17+
17.5% { --rainbow-color: #00a2f1; }
18+
18.75% { --rainbow-color: #00a0f4; }
19+
20% { --rainbow-color: #009ff7; }
20+
21.25% { --rainbow-color: #009dfa; }
21+
22.5% { --rainbow-color: #009bfc; }
22+
23.75% { --rainbow-color: #0098fd; }
23+
25% { --rainbow-color: #0096fd; }
24+
26.25% { --rainbow-color: #0093fd; }
25+
27.5% { --rainbow-color: #2e90fc; }
26+
28.75% { --rainbow-color: #4d8dfa; }
27+
30% { --rainbow-color: #638af8; }
28+
31.25% { --rainbow-color: #7587f5; }
29+
32.5% { --rainbow-color: #8583f1; }
30+
33.75% { --rainbow-color: #9280ed; }
31+
35% { --rainbow-color: #9f7ce9; }
32+
36.25% { --rainbow-color: #aa78e3; }
33+
37.5% { --rainbow-color: #b574dd; }
34+
38.75% { --rainbow-color: #be71d7; }
35+
40% { --rainbow-color: #c76dd1; }
36+
41.25% { --rainbow-color: #cf69c9; }
37+
42.5% { --rainbow-color: #d566c2; }
38+
43.75% { --rainbow-color: #dc63ba; }
39+
45% { --rainbow-color: #e160b3; }
40+
46.25% { --rainbow-color: #e65eab; }
41+
47.5% { --rainbow-color: #e95ca2; }
42+
48.75% { --rainbow-color: #ed5a9a; }
43+
50% { --rainbow-color: #ef5992; }
44+
51.25% { --rainbow-color: #f15989; }
45+
52.5% { --rainbow-color: #f25981; }
46+
53.75% { --rainbow-color: #f25a79; }
47+
55% { --rainbow-color: #f25c71; }
48+
56.25% { --rainbow-color: #f15e69; }
49+
57.5% { --rainbow-color: #ef6061; }
50+
58.75% { --rainbow-color: #ed635a; }
51+
60% { --rainbow-color: #eb6552; }
52+
61.25% { --rainbow-color: #e8694b; }
53+
62.5% { --rainbow-color: #e46c44; }
54+
63.75% { --rainbow-color: #e06f3d; }
55+
65% { --rainbow-color: #db7336; }
56+
66.25% { --rainbow-color: #d77630; }
57+
67.5% { --rainbow-color: #d17a2a; }
58+
68.75% { --rainbow-color: #cc7d24; }
59+
70% { --rainbow-color: #c6811e; }
60+
71.25% { --rainbow-color: #bf8418; }
61+
72.5% { --rainbow-color: #b98713; }
62+
73.75% { --rainbow-color: #b28a0f; }
63+
75% { --rainbow-color: #ab8d0c; }
64+
76.25% { --rainbow-color: #a3900b; }
65+
77.5% { --rainbow-color: #9c920d; }
66+
78.75% { --rainbow-color: #949510; }
67+
80% { --rainbow-color: #8b9715; }
68+
81.25% { --rainbow-color: #83991b; }
69+
82.5% { --rainbow-color: #7a9b21; }
70+
83.75% { --rainbow-color: #719d27; }
71+
85% { --rainbow-color: #679e2e; }
72+
86.25% { --rainbow-color: #5da035; }
73+
87.5% { --rainbow-color: #51a13c; }
74+
88.75% { --rainbow-color: #44a244; }
75+
90% { --rainbow-color: #34a44b; }
76+
91.25% { --rainbow-color: #1ba553; }
77+
92.5% { --rainbow-color: #00a65b; }
78+
93.75% { --rainbow-color: #00a663; }
79+
95% { --rainbow-color: #00a76c; }
80+
96.25% { --rainbow-color: #00a874; }
81+
97.5% { --rainbow-color: #00a87d; }
82+
98.75% { --rainbow-color: #00a985; }
83+
100% { --rainbow-color: #00a98e; }
84+
}
85+
86+
:root {
87+
--rainbow-color: #00a98e;
88+
animation: rainbow 20s linear infinite;
89+
}
90+
91+
.loading-container {
92+
position: fixed;
93+
top: 0;
94+
left: 0;
95+
z-index: 10000;
96+
display: flex;
97+
flex-direction: column;
98+
align-items: center;
99+
justify-content: center;
100+
width: 100%;
101+
height: 100%;
102+
color: var(--rainbow-color);
103+
user-select: none;
104+
background-color: snow;
105+
}
106+
107+
.loading-container .loading {
108+
display: flex;
109+
flex-wrap: wrap;
110+
align-items: center;
111+
justify-content: center;
112+
width: 40px;
113+
height: 40px;
114+
}
115+
116+
.loading-container .loading .square {
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
width: 20px;
121+
height: 20px;
122+
}
123+
124+
.loading-container .loading .square::before {
125+
width: 10px;
126+
height: 10px;
127+
content: "";
128+
border: 3px solid var(--rainbow-color);
129+
border-radius: 15%;
130+
animation: square-to-dot-animation 2s linear infinite;
131+
}
132+
133+
.loading-container .loading .square:nth-child(1)::before {
134+
animation-delay: calc(150ms * 1);
135+
}
136+
137+
.loading-container .loading .square:nth-child(2)::before {
138+
animation-delay: calc(150ms * 2);
139+
}
140+
141+
.loading-container .loading .square:nth-child(3)::before {
142+
animation-delay: calc(150ms * 3);
143+
}
144+
145+
.loading-container .loading .square:nth-child(4)::before {
146+
animation-delay: calc(150ms * 4);
147+
}
148+
149+
@keyframes square-to-dot-animation {
150+
15%,
151+
25% {
152+
width: 0;
153+
height: 0;
154+
margin: 5px;
155+
border-width: 5px;
156+
border-radius: 100%;
157+
}
158+
159+
40% {
160+
width: 10px;
161+
height: 10px;
162+
margin: initial;
163+
border-width: 3px;
164+
border-radius: 15%;
165+
}
166+
}
167+
168+
.loading-container .name {
169+
position: relative;
170+
margin-top: 20px;
171+
font-size: 24px;
172+
}
173+
174+
.loading-container .tips {
175+
position: relative;
176+
margin-top: 10px;
177+
font-size: 16px;
178+
opacity: 0.5;
179+
}
180+
181+
.loading-container .tips::after {
182+
position: absolute;
183+
padding-left: 5px;
184+
content: "…";
185+
}
186+
</style>
187+
188+
<div class="loading-container">
189+
<div class="loading">
190+
<div class="square"></div>
191+
<div class="square"></div>
192+
<div class="square"></div>
193+
<div class="square"></div>
194+
</div>
195+
<div class="name">%VITE_APP_TITLE%</div>
196+
<div class="tips">载入中</div>
197+
</div>

‎public/loading.css‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/assets/styles/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ body {
9494
box-sizing: inherit;
9595
}
9696

97+
#app {
98+
height: 100%;
99+
}
100+
97101
/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
98102
[data-fixed-calc-width] {
99103
position: fixed;

‎vite/plugins.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,35 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
9696
}
9797
})(),
9898

99+
{
100+
name: 'vite-plugin-loading',
101+
enforce: 'pre',
102+
transformIndexHtml: {
103+
handler: async html => html.replace(/<\/body>/, `${
104+
`<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
105+
}</body>`),
106+
order: 'pre',
107+
},
108+
transform: (code, id) => {
109+
if (/src\/main.ts$/.test(id)) {
110+
code = code.concat(`
111+
const loadingEl = document.querySelector('[data-app-loading]')
112+
if (loadingEl) {
113+
loadingEl.style['pointer-events'] = 'none'
114+
loadingEl.style.visibility = 'hidden'
115+
loadingEl.style.opacity = 0
116+
loadingEl.style.transition = 'all 0.5s ease-out'
117+
loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
118+
}
119+
`)
120+
return {
121+
code,
122+
map: null,
123+
}
124+
}
125+
},
126+
},
127+
99128
// https://github.com/unplugin/unplugin-turbo-console
100129
TurboConsole(),
101130

@@ -110,6 +139,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
110139

111140
{
112141
name: 'vite-plugin-debug-plugin',
142+
enforce: 'pre',
113143
transform: (code, id) => {
114144
if (/src\/main.ts$/.test(id)) {
115145
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
@@ -134,6 +164,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
134164

135165
{
136166
name: 'vite-plugin-disable-devtool',
167+
enforce: 'pre',
137168
transform: (code, id) => {
138169
if (/src\/main.ts$/.test(id)) {
139170
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {

0 commit comments

Comments
 (0)