admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首屏 loading 动画

Browse Source
This commit is contained in:
pany 2022-04-22 16:40:40 +08:00
parent e8167fec1c
commit 17bd07b54a
5 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -4,8 +4,6 @@
模板代码是从 [v3-admin v3.1.3](https://github.com/un-pany/v3-admin) 迁移而来，只是脚手架从 vue-cli 5.x 切换到了 vite，并作了一些繁琐的适配. 模板代码是从 [v3-admin v3.1.3](https://github.com/un-pany/v3-admin) 迁移而来，只是脚手架从 vue-cli 5.x 切换到了 vite，并作了一些繁琐的适配.
现在还是预发布 **3.1.3-rc3** 版本，正在努力重构中，等待 vite 版的 v3.1.3 发布.
文档暂无，可以先用到 v3-admin 的文档，基本上是适用的. 文档暂无，可以先用到 v3-admin 的文档，基本上是适用的.
## 开发 ## 开发

7
index.html
View File

@ -2,12 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/app-loading.css" />
<title>v3-admin-vite</title> <title>v3-admin-vite</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app">
<div id="app-loading"></div>
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "v3-admin-vite", "name": "v3-admin-vite",
"version": "3.1.3-rc3", "version": "3.1.3",
"description": "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite", "description": "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite",
"author": { "author": {
"name": "pany", "name": "pany",

65
public/app-loading.css Normal file
View File

@ -0,0 +1,65 @@
#app-loading,
#app-loading:before,
#app-loading:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: loadingAnimation 1.8s infinite ease-in-out;
animation: loadingAnimation 1.8s infinite ease-in-out;
}
#app-loading {
color: #409eff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
top: 0;
transform: translate(-50%, 0);
}
#app-loading:before,
#app-loading:after {
content: "";
position: absolute;
top: 0;
}
#app-loading:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#app-loading:after {
left: 3.5em;
}
@-webkit-keyframes loadingAnimation {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes loadingAnimation {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}

5
types/components.d.ts vendored
View File

@ -19,14 +19,9 @@ declare module '@vue/runtime-core' {
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']