From 4f98978edacbe72610a226267628ab20b57cfc4e Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sun, 1 Nov 2020 13:22:31 +0800
Subject: [PATCH] feat: global loading add text
---
CHANGELOG.zh_CN.md | 4 ++++
build/vite/plugin/index.ts | 1 +
index.html | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------
public/resource/img/loading.svg | 17 +----------------
4 files changed, 56 insertions(+), 74 deletions(-)
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 73e203b..a511d1d 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,5 +1,9 @@
## Wip
+### ✨ Features
+
+- 全局 loading 添加文本
+
### ⚡ Performance Improvements
- Layout 界面布局样式调整
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 8017926..9a184e3 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) {
: '',
// Insert Baidu statistics code
hmScript: isSiteMode() ? hmScript : '',
+ title: VITE_GLOB_APP_TITLE,
},
})
);
diff --git a/index.html b/index.html
index 53ce89c..d7a609d 100644
--- a/index.html
+++ b/index.html
@@ -9,79 +9,71 @@
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
+
<title></title>
<link rel="icon" href="/favicon.ico" />
<%= 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% {
- -webkit-transform: rotate(0);
- -moz-transform: rotate(0);
- -ms-transform: rotate(0);
- -o-transform: rotate(0);
- transform: rotate(0);
- }
+ <style>
+ @keyframes load {
+ 0% {
+ -webkit-transform: rotate(-360deg);
+ transform: rotate(-360deg);
}
- .g-loading {
- -webkit-animation: load 2s linear infinite;
- -moz-animation: load 2s linear infinite;
- -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;
+ 100% {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
}
+ }
- .app-loading {
- width: 100%;
- height: 100%;
- background: rgba(255, 255, 255, 0, 1);
- }
+ .app-loading {
+ width: 100%;
+ height: 100%;
- .app-loading .app-loading-wrap {
- 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);
- }
+ /* background: #f0f2f5; */
+ }
- .app-loading .app-loading-wrap img.logo {
- margin-bottom: 20px;
- margin-left: -20px;
- }
+ .app-loading .app-loading-wrap {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate3d(-50%, -50%, 0);
+ transform: translate3d(-50%, -50%, 0);
+ }
- .app-loading .app-loading-wrap .app-loading__tip {
- display: block;
- margin-top: 4px;
- font-size: 13px;
- color: #303133;
- text-align: center;
- }
- </style>
+ .app-loading .g-loading {
+ display: block;
+ width: 64px;
+ margin: 30px auto;
+ -webkit-animation: load 1.2s linear infinite;
+ animation: load 1.2s linear infinite;
+ -webkit-transform-origin: center center;
+ 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-wrap">
<img src="./resource/img/logo.png" class="logo" alt="Logo" />
<img src="./resource/img/loading.svg" alt="" class="g-loading" />
+ <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
</section>
</section>
</div>
diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg
index b85b892..c956a63 100644
--- a/public/resource/img/loading.svg
+++ b/public/resource/img/loading.svg
@@ -18,21 +18,6 @@
.bottom {
fill: #9dbfe4;
}
- @keyframes load {
- 0% {
- transform: rotate(-360deg);
- }
-
- 100% {
- transform: rotate(0);
- }
- }
-
- .load {
- animation: load 1.4s linear infinite;
- transform-origin: center center;
- }
-
svg {
display: block;
}
@@ -42,7 +27,7 @@
min-width: 100px;
margin-top: 4px;
font-size: 13px;
- color: #303133;
+ color: #2C3A61;
text-align: left;
}
</style>
--
libgit2 0.23.3