diff --git a/.changes/n-progress.md b/.changes/n-progress.md
new file mode 100644
index 0000000..fc3afd8
--- /dev/null
+++ b/.changes/n-progress.md
@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Add `NProgress` loading bar to the whole frontend.
diff --git a/package.json b/package.json
index f237d15..ddb8fc7 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "axios": "^1.7.7",
     "md-editor-v3": "^5.0.2",
     "monaco-editor": "^0.52.0",
+    "nprogress": "^0.2.0",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.1.3",
     "postcss": "^8.4.49",
@@ -43,6 +44,7 @@
     "@primevue/auto-import-resolver": "^4.2.2",
     "@tauri-apps/cli": "^2.1.0",
     "@types/node": "^22.9.0",
+    "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@vitejs/plugin-vue": "^5.2.0",
     "archons": "^0.2.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abfd6fd..621eddc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       monaco-editor:
         specifier: ^0.52.0
         version: 0.52.0
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
       pinia:
         specifier: ^2.2.6
         version: 2.2.6(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
@@ -84,6 +87,9 @@ importers:
       '@types/node':
         specifier: ^22.9.0
         version: 22.9.0
+      '@types/nprogress':
+        specifier: ^0.2.3
+        version: 0.2.3
       '@types/path-browserify':
         specifier: ^1.0.3
         version: 1.0.3
@@ -995,6 +1001,9 @@ packages:
   '@types/node@22.9.0':
     resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
 
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
   '@types/object-path@0.11.4':
     resolution: {integrity: sha512-4tgJ1Z3elF/tOMpA8JLVuR9spt9Ynsf7+JjqsQ2IqtiPJtcLoHoXcT6qU4E10cPFqyXX5HDm9QwIzZhBSkLxsw==}
 
@@ -2474,6 +2483,9 @@ packages:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   nypm@0.3.12:
     resolution: {integrity: sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -4566,6 +4578,8 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/nprogress@0.2.3': {}
+
   '@types/object-path@0.11.4': {}
 
   '@types/path-browserify@1.0.3': {}
@@ -6046,6 +6060,8 @@ snapshots:
     dependencies:
       path-key: 4.0.0
 
+  nprogress@0.2.0: {}
+
   nypm@0.3.12:
     dependencies:
       citty: 0.1.6
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index a3f6814..a2906f8 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -28,7 +28,7 @@ dependencies = [
 
 [[package]]
 name = "algohub"
-version = "0.1.1-alpha.0"
+version = "0.1.1-alpha.1"
 dependencies = [
  "reqwest",
  "serde",
diff --git a/src/router.ts b/src/router.ts
index a22b05c..8ae491b 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,8 @@ import {
   createWebHashHistory,
   type RouteRecordRaw,
 } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 
 const views = import.meta.glob([
   "./views/**/*.vue",
@@ -27,7 +29,26 @@ const routes: RouteRecordRaw[] = Object.entries(views).map(
   }
 );
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [...routes],
 });
+
+NProgress.configure({
+  easing: "ease",
+  speed: 500,
+  showSpinner: false,
+  trickleSpeed: 200,
+  minimum: 0.3,
+});
+
+router.beforeEach((_to, _from, next) => {
+  NProgress.start();
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;