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

Added spinner

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-04-13 23:47:23 +03:00
parent 9c8c0e186f
commit 8dee31ca16
3 changed files with 104 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/components/Spinner.astro Normal file
View file

@ -0,0 +1,95 @@
<div id="page-loading-indicator" aria-hidden="true">
<span class="page-loading-spinner"></span>
</div>
<script is:inline>
(() => {
let timer;
const show = () => {
clearTimeout(timer);
timer = setTimeout(() => {
const el = document.getElementById("page-loading-indicator");
if (el) el.classList.add("is-active");
}, 120);
};
const hide = () => {
clearTimeout(timer);
const el = document.getElementById("page-loading-indicator");
if (el) el.classList.remove("is-active");
};
document.addEventListener("astro:before-preparation", show);
document.addEventListener("astro:page-load", hide);
hide();
})();
</script>
<style is:global>
#page-loading-indicator {
position: fixed;
top: 1rem;
right: 1rem;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
opacity: 0;
transform: scale(1.3);
pointer-events: none;
/* transition:
opacity 160ms ease,
transform 160ms ease; */
z-index: 9999;
}
#page-loading-indicator.is-active {
opacity: 1;
transform: scale(1);
}
.page-loading-spinner {
width: 1.4rem;
height: 1.4rem;
box-sizing: border-box;
border: 1.5px solid #7da2ff;
border-top-color: white;
border-radius: 50%;
background: transparent;
box-shadow:
0 0 0 1px #606060,
inset 0 0 0 1px #606060;
animation: page-loading-spin-rhythm 2.1s infinite;
transform-origin: center;
}
@keyframes page-loading-spin-rhythm {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0.25, 0.75, 0.35, 1);
}
52% {
transform: rotate(720deg); /* 前两圈，稍微慢一点 */
animation-timing-function: cubic-bezier(0.55, 0.08, 0.78, 0.22);
}
100% {
transform: rotate(1080deg); /* 最后一圈更慢 */
}
}
.dark .page-loading-spinner,
html.dark .page-loading-spinner {
border-color: #d8c7a1;
border-top-color: transparent;
}
@keyframes page-loading-spin {
to {
transform: rotate(360deg);
}
}
</style>

2
src/components/ThemeIcon.astro
View file

@ -34,7 +34,7 @@ const switchHref = "/" + segments.join("/");
</svg>
</button>
<a class="lang-switch" href={switchHref} data-astro-reload>
<a class="lang-switch" href={switchHref}>
{switchLabel}
</a>
</div>

9
src/layouts/BaseLayout.astro
View file

@ -2,8 +2,10 @@
import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro";
import { ClientRouter } from "astro:transitions";
import { slide, fade } from "astro:transitions";
import SEO from "@/components/SEO.astro";
import FloatingActions from "@/components/FloatingActions.astro";
import Spinner from "@/components/Spinner.astro";
const {
pageTitle,
@ -25,9 +27,14 @@ const {
<title>{pageTitle}</title>
</head>
<FloatingActions />
<body>
<Header />
<main class="page-content">
<Spinner />
<main
class="page-content"
transition:animate={fade({ duration: "0.05s" })}
>
<slot />
</main>
<Footer />