mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-11-29 18:48:31 +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>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="stylesheet" href="/loading.css" />
|
|
||||||
<link rel="stylesheet" href="/browser_upgrade/index.css" />
|
<link rel="stylesheet" href="/browser_upgrade/index.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="Expires" content="0">
|
<meta http-equiv="Expires" content="0">
|
||||||
@ -14,15 +13,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<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 id="browser-upgrade">
|
||||||
<div class="title">为了您的体验，推荐使用以下浏览器</div>
|
<div class="title">为了您的体验，推荐使用以下浏览器</div>
|
||||||
<div class="browsers">
|
<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;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
|
/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
|
||||||
[data-fixed-calc-width] {
|
[data-fixed-calc-width] {
|
||||||
position: fixed;
|
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
|
// https://github.com/unplugin/unplugin-turbo-console
|
||||||
TurboConsole(),
|
TurboConsole(),
|
||||||
|
|
||||||
@ -138,6 +167,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
|
|||||||
|
|
||||||
{
|
{
|
||||||
name: 'vite-plugin-debug-plugin',
|
name: 'vite-plugin-debug-plugin',
|
||||||
|
enforce: 'pre',
|
||||||
transform: (code, id) => {
|
transform: (code, id) => {
|
||||||
if (/src\/main.ts$/.test(id)) {
|
if (/src\/main.ts$/.test(id)) {
|
||||||
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
|
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
|
||||||
@ -162,6 +192,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
|
|||||||
|
|
||||||
{
|
{
|
||||||
name: 'vite-plugin-disable-devtool',
|
name: 'vite-plugin-disable-devtool',
|
||||||
|
enforce: 'pre',
|
||||||
transform: (code, id) => {
|
transform: (code, id) => {
|
||||||
if (/src\/main.ts$/.test(id)) {
|
if (/src\/main.ts$/.test(id)) {
|
||||||
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {
|
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user