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

refactor(index.html): ♻️ 优化 loading 动画效果

Browse Source
This commit is contained in:
郝先瑞
2024-05-24 18:14:30 +08:00
parent 1931e4f6f5
commit 1c4326fdfa
1 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@@ -35,31 +35,26 @@
} }
.loader { .loader {
position: relative; --d: 22px;
width: 40px;
aspect-ratio: 0.577; width: 4px;
overflow: hidden; height: 4px;
clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0); color: #25b09b;
animation: l19 2s infinite linear; border-radius: 50%;
box-shadow:
calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
animation: l27 1s infinite steps(8);
} }
.loader::before { @keyframes l27 {
position: absolute;
inset: -150%;
content: "";
background: repeating-conic-gradient(
from 30deg,
#ffabab 0 60deg,
#abe4ff 0 120deg,
#ff7373 0 180deg
);
animation: inherit;
animation-direction: reverse;
}
@keyframes l19 {
100% { 100% {
transform: rotate(360deg); transform: rotate(1turn);
} }
} }
</style> </style>