cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-07-03 15:41:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

revert spinner changes

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-04-14 15:37:38 +03:00
parent b2b7ecb34a
commit ee6112b3f8
1 changed files with 14 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/Spinner.astro
View file

@ -4,36 +4,26 @@
<script is:inline> <script is:inline>
(() => { (() => {
const KEY = "__page_loading_indicator_bound__";
if (window[KEY]) return;
window[KEY] = true;
let timer; let timer;
const getEl = () => document.getElementById("page-loading-indicator");
const show = () => { const show = () => {
clearTimeout(timer); clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
const el = getEl(); const el = document.getElementById("page-loading-indicator");
if (el) el.classList.add("is-active"); if (el) el.classList.add("is-active");
}, 120); }, 120);
}; };
const hide = () => { const hide = () => {
clearTimeout(timer); clearTimeout(timer);
const el = getEl(); const el = document.getElementById("page-loading-indicator");
if (!el) return; if (el) el.classList.remove("is-active");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.classList.remove("is-active");
});
});
}; };
document.addEventListener("astro:before-preparation", show); document.addEventListener("astro:before-preparation", show);
document.addEventListener("astro:page-load", hide); document.addEventListener("astro:page-load", hide);
hide();
})(); })();
</script> </script>
@ -50,11 +40,10 @@
pointer-events: none; pointer-events: none;
transition: transform 160ms linear; transition: transform 160ms linear;
z-index: 9999; z-index: 9999;
will-change: transform;
} }
#page-loading-indicator.is-active { #page-loading-indicator.is-active {
transform: scale(1) translateY(0); transform: scale(1) translateY(0px);
} }
.page-loading-spinner { .page-loading-spinner {
@ -79,12 +68,12 @@
} }
52% { 52% {
transform: rotate(720deg); transform: rotate(720deg); /* 前两圈，稍微慢一点 */
animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22); animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22);
} }
100% { 100% {
transform: rotate(1080deg); transform: rotate(1080deg); /* 最后一圈更慢 */
} }
} }
@ -93,4 +82,10 @@
border-color: #d8c7a1; border-color: #d8c7a1;
border-top-color: transparent; border-top-color: transparent;
} }
@keyframes page-loading-spin {
to {
transform: rotate(360deg);
}
}
</style> </style>