Skip to content

B
basic-vue-admin
提交 4811cce8 作者: vben
操作

feat: first screen loading waiting animation

上级 f2bdf0b8
正在显示 包含 142 行增加 和 5 行删除
README.md
...@@ -217,16 +217,16 @@ yarn clean:lib # 删除node_modules，兼容window系统 ...@@ -217,16 +217,16 @@ yarn clean:lib # 删除node_modules，兼容window系统
- [x] 表格组件 - [x] 表格组件
- [x] 图表库 - [x] 图表库
- [x] 数字动画 - [x] 数字动画
- [x] 首屏加载等待动画
## 正在开发的功能 ## 正在开发的功能
- [ ] 主题配置
- [ ] 上传组件 - [ ] 上传组件
- [ ] 富文本组件 - [ ] 富文本组件
- [ ] 数据导入导出 - [ ] 数据导入导出
- [ ] 黑暗主题
- [ ] 全局错误处理 - [ ] 全局错误处理
- [ ] 首屏加载等待动画 - [ ] 主题配置
- [ ] 黑暗主题
- [ ] 打包 Gzip - [ ] 打包 Gzip
- [ ] 抽取生产环境配置文件 - [ ] 抽取生产环境配置文件
- [ ] 系统性能优化 - [ ] 系统性能优化
......
index.html
...@@ -7,7 +7,77 @@ ...@@ -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>
public/resource/img/loading.svg 0 → 100644
<?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>
src/views/dashboard/workbench/components/ProdTotal.vue
...@@ -9,7 +9,7 @@ ...@@ -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';
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论