lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ♻️ 更换首页loading动画

This commit is contained in:
hxr 2023-11-06 23:54:38 +08:00
parent e9f11cc8ed
commit 5f1f962643
1 changed files with 80 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
index.html
View File

@ -15,7 +15,16 @@
<body> <body>
<div id="app" class="app"> <div id="app" class="app">
<!--加载动画--> <!--加载动画-->
<div class="cm-spinner"></div> <div class="mesh-loader">
<div class="set-one">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="set-two">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script> <script>
@ -32,62 +41,98 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.mesh-loader {
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
} }
.cm-spinner { .mesh-loader .circle {
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; position: absolute;
inset: 6px; width: 25px;
content: ""; height: 25px;
border: 4px solid transparent; margin: -12.5px;
background: #03a9f4;
border-radius: 50%; border-radius: 50%;
animation: mesh 3s ease-in-out infinite;
animation: mesh 3s ease-in-out infinite -1.5s;
} }
.cm-spinner::before { .mesh-loader > div .circle:last-child {
border-top-color: #bad375; animation-delay: 0s;
animation: 3s spin linear infinite; animation-delay: 0s;
animation: 3s spin linear infinite;
} }
.cm-spinner::after { .mesh-loader > div {
border-top-color: #26a9e0; position: absolute;
animation: spin 1.5s linear infinite; top: 50%;
animation: spin 1.5s linear infinite; left: 50%;
} }
@keyframes spin { .mesh-loader > div:last-child {
from { transform: rotate(90deg);
transform: rotate(0deg); transform: rotate(90deg);
transform: rotate(0deg); }
@keyframes mesh {
0% {
transform: rotate(0);
transform: rotate(0);
transform-origin: 50% -100%;
transform-origin: 50% -100%;
} }
to { 50% {
transform: rotate(360deg); transform: rotate(360deg);
transform: rotate(360deg); transform: rotate(360deg);
transform-origin: 50% -100%;
transform-origin: 50% -100%;
}
50.00001% {
transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 200%;
transform-origin: 50% 200%;
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
transform-origin: 50% 200%;
transform-origin: 50% 200%;
} }
} }
@keyframes spin { @keyframes mesh {
from { 0% {
transform: rotate(0deg); transform: rotate(0);
transform: rotate(0deg); transform: rotate(0);
transform-origin: 50% -100%;
transform-origin: 50% -100%;
} }
to { 50% {
transform: rotate(360deg); transform: rotate(360deg);
transform: rotate(360deg); transform: rotate(360deg);
transform-origin: 50% -100%;
transform-origin: 50% -100%;
}
50.00001% {
transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 200%;
transform-origin: 50% 200%;
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
transform-origin: 50% 200%;
transform-origin: 50% 200%;
} }
} }
</style> </style>