Skip to content

N
najiu-admin-template
Commit 4f98978e authored by vben's avatar vben
Browse files
Options

feat: global loading add text

parent 275ad9f1
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 74 deletions
CHANGELOG.zh_CN.md
View file @ 4f98978e
## Wip ## Wip
### ✨ Features
- 全局 loading 添加文本
### ⚡ Performance Improvements ### ⚡ Performance Improvements
- Layout 界面布局样式调整 - Layout 界面布局样式调整
......
build/vite/plugin/index.ts
View file @ 4f98978e
...@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) { ...@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) {
: '', : '',
// Insert Baidu statistics code // Insert Baidu statistics code
hmScript: isSiteMode() ? hmScript : '', hmScript: isSiteMode() ? hmScript : '',
title: VITE_GLOB_APP_TITLE,
}, },
}) })
); );
......
index.html
View file @ 4f98978e
...@@ -9,79 +9,71 @@ ...@@ -9,79 +9,71 @@
name="viewport" name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/> />
<title></title> <title></title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<%= viteHtmlPluginOptions.injectConfig %> <%= viteHtmlPluginOptions.injectConfig %>
</head>
<body>
<div id="app">
<style>
@keyframes load {
0% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% { <style>
-webkit-transform: rotate(0); @keyframes load {
-moz-transform: rotate(0); 0% {
-ms-transform: rotate(0); -webkit-transform: rotate(-360deg);
-o-transform: rotate(0); transform: rotate(-360deg);
transform: rotate(0);
}
} }
.g-loading { 100% {
-webkit-animation: load 2s linear infinite; -webkit-transform: rotate(0);
-moz-animation: load 2s linear infinite; transform: rotate(0);
-ms-animation: load 2s linear infinite;
-o-animation: load 2s linear infinite;
animation: load 2s linear infinite;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
} }
}
.app-loading { .app-loading {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 0, 1);
}
.app-loading .app-loading-wrap { /* background: #f0f2f5; */
position: absolute; }
top: 45%;
left: 50%;
width: 64px;
-ms-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.app-loading .app-loading-wrap img.logo { .app-loading .app-loading-wrap {
margin-bottom: 20px; position: absolute;
margin-left: -20px; top: 50%;
} left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.app-loading .app-loading-wrap .app-loading__tip { .app-loading .g-loading {
display: block; display: block;
margin-top: 4px; width: 64px;
font-size: 13px; margin: 30px auto;
color: #303133; -webkit-animation: load 1.2s linear infinite;
text-align: center; animation: load 1.2s linear infinite;
} -webkit-transform-origin: center center;
</style> transform-origin: center center;
}
.app-loading .app-loading-wrap img.logo {
display: block;
width: 90px;
margin: 0 auto;
margin-bottom: 20px;
}
.app-loading .app-loading-wrap .app-loading__tip {
display: block;
margin: 20px auto 0 0;
font-size: 30px;
color: #2c3a61;
}
</style>
</head>
<body>
<div id="app">
<section class="app-loading"> <section class="app-loading">
<section class="app-loading-wrap"> <section class="app-loading-wrap">
<img src="./resource/img/logo.png" class="logo" alt="Logo" /> <img src="./resource/img/logo.png" class="logo" alt="Logo" />
<img src="./resource/img/loading.svg" alt="" class="g-loading" /> <img src="./resource/img/loading.svg" alt="" class="g-loading" />
<h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
</section> </section>
</section> </section>
</div> </div>
......
public/resource/img/loading.svg
View file @ 4f98978e
...@@ -18,21 +18,6 @@ ...@@ -18,21 +18,6 @@
.bottom { .bottom {
fill: #9dbfe4; fill: #9dbfe4;
} }
@keyframes load {
0% {
transform: rotate(-360deg);
}
100% {
transform: rotate(0);
}
}
.load {
animation: load 1.4s linear infinite;
transform-origin: center center;
}
svg { svg {
display: block; display: block;
} }
...@@ -42,7 +27,7 @@ ...@@ -42,7 +27,7 @@
min-width: 100px; min-width: 100px;
margin-top: 4px; margin-top: 4px;
font-size: 13px; font-size: 13px;
color: #303133; color: #2C3A61;
text-align: left; text-align: left;
} }
</style> </style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment