tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 添加加载动画

Browse Source 
Former-commit-id: f0bd1999c8a520a507558ce5339c0043025b22ad
This commit is contained in:
郝先瑞
2023-11-03 17:27:09 +08:00
parent 56d4cdcac2
commit f87afc18ef
2 changed files with 98 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@@ -13,10 +13,83 @@
</head>
<body>
<div id="app" class="app"></div>
<div id="app" class="app">
<!--加载动画-->
<div class="cm-spinner"></div>
</div>
<script type="module" src="/src/main.ts"></script>
<script>
global = globalThis;
</script>
<style>
html,
body,
#app {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.cm-spinner {
position: relative;
width: 150px;
height: 150px;
border: 3px solid transparent;
border-top: 4px solid #f15e41;
border-radius: 50%;
animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
.cm-spinner::before,
.cm-spinner::after {
position: absolute;
inset: 6px;
content: "";
border: 4px solid transparent;
border-radius: 50%;
}
.cm-spinner::before {
border-top-color: #bad375;
animation: 3s spin linear infinite;
animation: 3s spin linear infinite;
}
.cm-spinner::after {
border-top-color: #26a9e0;
animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</body>
</html>