feat: first screen loading waiting animation

vbenjs · Oct 11, 2020 · 4811cce · 4811cce
1 parent f2bdf0b
commit 4811cce
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -217,16 +217,16 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [x] 表格组件
 - [x] 图表库
 - [x] 数字动画
+- [x] 首屏加载等待动画
 
 ## 正在开发的功能
 
-- [ ] 主题配置
 - [ ] 上传组件
 - [ ] 富文本组件
 - [ ] 数据导入导出
-- [ ] 黑暗主题
 - [ ] 全局错误处理
-- [ ] 首屏加载等待动画
+- [ ] 主题配置
+- [ ] 黑暗主题
 - [ ] 打包 Gzip
 - [ ] 抽取生产环境配置文件
 - [ ] 系统性能优化

diff --git a/index.html b/index.html
@@ -7,7 +7,77 @@
     <title>Vue Vben admin 2.0</title>
   </head>
   <body>
-    <div id="app"></div>
+    <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);
+          }
+        }
+
+        .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;
+        }
+
+        .app-loading {
+          width: 100%;
+          height: 100%;
+          background: rgba(255, 255, 255, 0, 3);
+        }
+
+        .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);
+        }
+
+        .app-loading .app-loading-wrap img.logo {
+          margin-bottom: 20px;
+          margin-left: -20px;
+        }
+
+        .app-loading .app-loading-wrap .app-loading__tip {
+          display: block;
+          margin-top: 4px;
+          font-size: 13px;
+          color: #303133;
+          text-align: center;
+        }
+      </style>
+      <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" />
+        </section>
+      </section>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg
diff --git a/public/resource/img/logo.png b/public/resource/img/logo.png
diff --git a/src/assets/images/header.jpg b/src/assets/images/header.jpg
diff --git a/src/views/dashboard/workbench/components/ProdTotal.vue b/src/views/dashboard/workbench/components/ProdTotal.vue
@@ -9,7 +9,7 @@
     </template>
   </Row>
 </template>
-<script lang="tsx">
+<script lang="ts">
   import { defineComponent } from 'vue';
   import { Row, Col } from 'ant-design-vue';