mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-02-02 18:28: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] 首屏加载等待动画
|
||||
|
||||
## 正在开发的功能
|
||||
|
||||
- [ ] 主题配置
|
||||
- [ ] 上传组件
|
||||
- [ ] 富文本组件
|
||||
- [ ] 数据导入导出
|
||||
- [ ] 黑暗主题
|
||||
- [ ] 全局错误处理
|
||||
- [ ] 首屏加载等待动画
|
||||
- [ ] 主题配置
|
||||
- [ ] 黑暗主题
|
||||
- [ ] 打包 Gzip
|
||||
- [ ] 抽取生产环境配置文件
|
||||
- [ ] 系统性能优化
|
||||
|
||||
72
index.html
72
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>
|
||||
|
||||
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>
|
||||
</Row>
|
||||
</template>
|
||||
<script lang="tsx">
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Row, Col } from 'ant-design-vue';
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user