From 4811cce809453df78dc2c25cd9805eae483297fc Mon Sep 17 00:00:00 2001 From: vben <anncwb@126.com> Date: Mon, 12 Oct 2020 00:38:22 +0800 Subject: [PATCH] feat: first screen loading waiting animation --- README.md | 6 +++--- index.html | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- public/resource/img/loading.svg | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/resource/img/logo.png | Bin 0 -> 4042 bytes src/assets/images/header.jpg | Bin 1085667 -> 0 bytes src/views/dashboard/workbench/components/ProdTotal.vue | 2 +- 6 files changed, 142 insertions(+), 5 deletions(-) create mode 100644 public/resource/img/loading.svg create mode 100644 public/resource/img/logo.png diff --git a/README.md b/README.md index a3d8253..19bc2ff 100644 --- 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 index 57b3a32..84ba684 100644 --- 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 new file mode 100644 index 0000000..b85b892 --- /dev/null +++ b/public/resource/img/loading.svg @@ -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> diff --git a/public/resource/img/logo.png b/public/resource/img/logo.png new file mode 100644 index 0000000..cd4c33d Binary files /dev/null and b/public/resource/img/logo.png differ diff --git a/src/assets/images/header.jpg b/src/assets/images/header.jpg index 6b16a68..977584b 100644 Binary files a/src/assets/images/header.jpg and b/src/assets/images/header.jpg differ diff --git a/src/views/dashboard/workbench/components/ProdTotal.vue b/src/views/dashboard/workbench/components/ProdTotal.vue index 66ca0a1..b9949fe 100644 --- 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'; -- libgit2 0.23.3