feat: add page load progress

sunshineLixun · Apr 28, 2024 · 092432c · 092432c
1 parent 95dd107
commit 092432c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "astro": "^4.5.5",
+    "astro-loading-indicator": "^0.4.0",
     "colorjs.io": "^0.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -1,6 +1,8 @@
 ---
 import "@/styles/globals.css";
 import "@fontsource/merriweather";
+import { ViewTransitions } from "astro:transitions";
+import LoadingIndicator from "astro-loading-indicator/component";
 ---
 
 <!doctype html>
@@ -11,6 +13,8 @@ import "@fontsource/merriweather";
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Astro</title>
+    <ViewTransitions />
+    <LoadingIndicator color="#7e22ce" />
   </head>
   <body class="mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]">
     <slot />