Home Explore Help
Register Sign In
hrx
/
vent-forewarn-micro
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: first screen loading waiting animation

vben 4 years ago
parent
f2bdf0b86d
commit
4811cce809
6 changed files with 142 additions and 5 deletions
Split View Show Diff Stats
  1. 3 3
      README.md
  2. 71 1
      index.html
  3. 67 0
      public/resource/img/loading.svg
  4. BIN
      public/resource/img/logo.png
  5. BIN
      src/assets/images/header.jpg
  6. 1 1
      src/views/dashboard/workbench/components/ProdTotal.vue

+ 3 - 3
README.md
View File 

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

+ 71 - 1
index.html
View File 

@@ -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>

+ 67 - 0
public/resource/img/loading.svg
View File 

@@ -0,0 +1,67 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg viewBox="0 0 200 200" version="1.1" 
+  xmlns="http://www.w3.org/2000/svg" 
+  xmlns:xlink="http://www.w3.org/1999/xlink">
 
+  <style type="text/css">
 
+        .left-linear {
 
+          fill: url(#left-linear);
 
+        }
 
+
 
+        .right-linear {
 
+          fill: url(#right-linear);
 
+        }
 
+
 
+        .top {
 
+          fill: #64acff;
 
+        }
 
+
 
+        .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;
 
+        }
 
+
 
+        .tip {
 
+          display: block;
 
+          min-width: 100px;
 
+          margin-top: 4px;
 
+          font-size: 13px;
 
+          color: #303133;
 
+          text-align: left;
 
+        }
 
+  </style>
 
+  <circle cx="97" cy="97" r="81" stroke-width="16" stroke="#327fd8" fill="none"></circle>
 
+  <g class="load">
 
+    <!--右半圆环-->
 
+    <linearGradient id="left-linear" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="100" y2="180">
 
+      <stop offset="0" style="stop-color: #64acff;" />
 
+      <stop offset="1" style="stop-color: #9DBFE4;" />
 
+    </linearGradient>
 
+    <path class="left-linear" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z" />
 
+    <!--左半圆环-->
 
+    <circle class="bottom" cx="100" cy="190" r="10" />
 
+    <linearGradient id="right-linear" gradientUnits="userSpaceOnUse" x1="100" y1="120" x2="100" y2="180">
 
+      <stop offset="0" style="stop-color: transparent;" />
 
+      <stop offset="1" style="stop-color: transparent;" />
 
+    </linearGradient>
 
+    <path class="right-linear" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z" />
 
+    <!--左半圆环-->
 
+    <circle class="top" cx="100" cy="10" r="10" />
 
+  </g>
 
+</svg>

BIN
public/resource/img/logo.png
View File


BIN
src/assets/images/header.jpg
View File


+ 1 - 1
src/views/dashboard/workbench/components/ProdTotal.vue
View File 

@@ -9,7 +9,7 @@
 
     </template>
 
   </Row>
 
 </template>
 
-<script lang="tsx">
 
+<script lang="ts">
 
   import { defineComponent } from 'vue';
 
   import { Row, Col } from 'ant-design-vue';