feat: Add TopLoader progress bar

gita · Mar 4, 2024 · 4d6e187 · 4d6e187
1 parent 0b42284
commit 4d6e187
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "next-plausible": "^3.9.1",
     "next-redux-wrapper": "^7.0.5",
     "next-themes": "^0.2.1",
+    "nextjs-toploader": "^1.6.6",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import { Metadata } from "next";
 import { Inter } from "next/font/google";
 
+import TopLoader from "components/Headers/TopLoader";
+
 import { PreloadResources } from "./preload-resources";
 import Providers from "./providers";
 
@@ -53,6 +55,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body>
         <Providers>
           <PreloadResources />
+          <TopLoader />
           {children}
         </Providers>
       </body>

diff --git a/src/components/Headers/TopLoader.tsx b/src/components/Headers/TopLoader.tsx
@@ -0,0 +1,17 @@
+import NextTopLoader from "nextjs-toploader";
+
+export default function TopLoader() {
+  return (
+    <NextTopLoader
+    color="#F57903"
+    initialPosition={0.08}
+    crawlSpeed={800}
+    height={4}
+    crawl={true}
+    showSpinner={true}
+    easing="ease"
+    speed={200}
+    shadow="0 0 10px #2299DD,0 0 10px #2299DD"
+  />
+  );
+}