hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.08:首屏增加loading动画'

Browse Source
This commit is contained in:
lyt 2021-01-08 13:22:12 +08:00
parent 6939f88805
commit 1c2b752837
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
vue-admin-wonderful-next/index.html
View File

@ -3,11 +3,23 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue-admin-wonderful</title> <title>vue-admin-wonderful</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app">
<div class="loading-next">
<div class="loading-next-box">
<div class="loading-animation">
<div class="loading-animation-box">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

1
vue-admin-wonderful-next/public/loading.css Normal file
View File

@ -0,0 +1 @@
.loading-next{width:100%;height:100%}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-next-box .loading-animation{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center}.loading-animation .loading-animation-box{display:block;font-size:0;color:#fff;position:relative;width:64px;height:64px}.loading-animation-box>div:nth-child(1){top:-25%;z-index:1;height:100%;border-radius:10%;animation:loading-animation .6s -0.1s linear infinite;background-color:#409eff}@keyframes loading-animation{15%{border-bottom-right-radius:10%}25%{transform:translateY(25%) rotate(22.5deg)}50%{border-bottom-right-radius:100%;transform:translateY(50%) scale(1,0.9) rotate(45deg)}75%{transform:translateY(25%) rotate(67.5deg)}100%{transform:translateY(0) rotate(90deg)}}.loading-animation-box>div:nth-child(2){height:10%;background:#000;border-radius:50%;opacity:.2;animation:loading-animation-shadow .6s -0.1s linear infinite;position:absolute;left:0;width:100%;bottom:-40%}@keyframes loading-animation-shadow{50%{transform:scale(1.25,1)}}