mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-02-02 19:08:40 +08:00
feat: first screen loading waiting animation
This commit is contained in:
vben
parent
f2bdf0b86d
commit
4811cce809
@ -217,16 +217,16 @@ yarn clean:lib # 删除node_modules，兼容window系统
|
|||||||
- [x] 表格组件
|
- [x] 表格组件
|
||||||
- [x] 图表库
|
- [x] 图表库
|
||||||
- [x] 数字动画
|
- [x] 数字动画
|
||||||
|
- [x] 首屏加载等待动画
|
||||||
|
|
||||||
## 正在开发的功能
|
## 正在开发的功能
|
||||||
|
|
||||||
- [ ] 主题配置
|
|
||||||
- [ ] 上传组件
|
- [ ] 上传组件
|
||||||
- [ ] 富文本组件
|
- [ ] 富文本组件
|
||||||
- [ ] 数据导入导出
|
- [ ] 数据导入导出
|
||||||
- [ ] 黑暗主题
|
|
||||||
- [ ] 全局错误处理
|
- [ ] 全局错误处理
|
||||||
- [ ] 首屏加载等待动画
|
- [ ] 主题配置
|
||||||
|
- [ ] 黑暗主题
|
||||||
- [ ] 打包 Gzip
|
- [ ] 打包 Gzip
|
||||||
- [ ] 抽取生产环境配置文件
|
- [ ] 抽取生产环境配置文件
|
||||||
- [ ] 系统性能优化
|
- [ ] 系统性能优化
|
||||||
|
|||||||
72
index.html
72
index.html
@ -7,7 +7,77 @@
|
|||||||
<title>Vue Vben admin 2.0</title>
|
<title>Vue Vben admin 2.0</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
67
public/resource/img/loading.svg
Normal file
67
public/resource/img/loading.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/resource/img/logo.png
Normal file
BIN
public/resource/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 16 KiB |
@ -9,7 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</Row>
|
</Row>
|
||||||
</template>
|
</template>
|
||||||
<script lang="tsx">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { Row, Col } from 'ant-design-vue';
|
import { Row, Col } from 'ant-design-vue';
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user