blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(styles): 增加项目加载loading动画

Browse Source
This commit is contained in:
chen.home 2022-09-07 23:39:29 +08:00
parent 3933947446
commit 47b70dbc42
3 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -3,10 +3,21 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="stylesheet" href="/resource/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
</head>
<body>
<div id="loading-container">
<div class="app-loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

63
public/resource/loading.css Normal file
View File

@ -0,0 +1,63 @@
#loading-container{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.app-loading {
width: 88px;
height: 88px;
animation: app-loading-y0fdc1 2s infinite ease;
transform-style: preserve-3d;
}
.app-loading > div {
background-color: rgba(0, 77, 255, 0.2);
height: 100%;
position: absolute;
width: 100%;
border: 2px solid #004dff;
}
.app-loading div:nth-of-type(1) {
transform: translateZ(-44px) rotateY(180deg);
}
.app-loading div:nth-of-type(2) {
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}
.app-loading div:nth-of-type(3) {
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}
.app-loading div:nth-of-type(4) {
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}
.app-loading div:nth-of-type(5) {
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}
.app-loading div:nth-of-type(6) {
transform: translateZ(44px);
}
@keyframes app-loading-y0fdc1 {
0% {
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
}
50% {
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
}
100% {
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
}
}

7
src/main.ts
View File

@ -14,6 +14,11 @@ async function setupApp() {
// 安装router
await setupRouter(app);
// 挂载
app.mount('#app');
await app.mount('#app');
closeAppLoading();
}
setupApp();
function closeAppLoading() {
document.querySelector('#loading-container')!.remove();
}