diff --git a/web/admin/src/App.vue b/web/admin/src/App.vue
index 31e9481..34b3e8c 100644
--- a/web/admin/src/App.vue
+++ b/web/admin/src/App.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import TopProgress from '@/components/TopProgress.vue'
 </script>
 
 <template>
+  <TopProgress />
   <AConfigProvider>
     <router-view />
   </AConfigProvider>
diff --git a/web/admin/src/components/TopProgress.vue b/web/admin/src/components/TopProgress.vue
new file mode 100644
index 0000000..85683db
--- /dev/null
+++ b/web/admin/src/components/TopProgress.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useTopProgress } from '@/composables/useTopProgress'
+
+const { progress, visible, smooth } = useTopProgress()
+</script>
+
+<template>
+  <div class="top-progress-container" :class="{ 'is-visible': visible }">
+    <div class="top-progress-bar" :class="{ 'no-anim': !smooth }" :style="{ width: progress + '%' }" />
+  </div>
+</template>
+
+<style scoped>
+.top-progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.top-progress-container.is-visible {
+  opacity: 1;
+}
+.top-progress-bar {
+  height: 100%;
+  background: var(--ta-primary-gradient);
+  transition: width 0.2s ease;
+}
+.top-progress-bar.no-anim {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .top-progress-container,
+  .top-progress-bar {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/web/admin/src/router/index.ts b/web/admin/src/router/index.ts
index 2af1bfa..08a104f 100644
--- a/web/admin/src/router/index.ts
+++ b/web/admin/src/router/index.ts
@@ -4,6 +4,7 @@ import adminRoutes from './admin'
 import { useAuthStore } from '@/stores/auth'
 import { shouldRefresh, getRefreshToken } from '@/utils/request'
 import { useSiteName } from '@/composables/useSiteName'
+import { useTopProgress } from '@/composables/useTopProgress'
 import axios from 'axios'
 
 const routes: RouteRecordRaw[] = [
@@ -44,8 +45,11 @@ async function checkSetupStatus(): Promise<boolean> {
 }
 
 const { siteName, fetchSiteName } = useSiteName()
+const { start, done } = useTopProgress()
 
 router.beforeEach(async (to) => {
+  start()
+
   const authStore = useAuthStore()
   authStore.loadFromStorage()
 
@@ -82,4 +86,12 @@ router.beforeEach(async (to) => {
   return true
 })
 
+router.afterEach(() => {
+  done()
+})
+
+router.onError(() => {
+  done()
+})
+
 export default router
diff --git a/web/tenant/src/App.vue b/web/tenant/src/App.vue
index c882f85..6182385 100644
--- a/web/tenant/src/App.vue
+++ b/web/tenant/src/App.vue
@@ -1,10 +1,12 @@
 <template>
+  <TopProgress />
   <router-view />
   <Toast />
   <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
+import TopProgress from '@/components/common/TopProgress.vue'
 import Toast from '@/components/common/Toast.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 </script>
diff --git a/web/tenant/src/components/common/TopProgress.vue b/web/tenant/src/components/common/TopProgress.vue
new file mode 100644
index 0000000..32fec5e
--- /dev/null
+++ b/web/tenant/src/components/common/TopProgress.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useTopProgress } from '@/composables/useTopProgress'
+
+const { progress, visible, smooth } = useTopProgress()
+</script>
+
+<template>
+  <div
+    class="top-progress-container fixed top-0 left-0 z-[9999] h-[3px] w-full pointer-events-none"
+    :class="{ 'is-visible': visible }"
+  >
+    <div
+      class="top-progress-bar h-full bg-gradient-to-r from-primary-500 to-primary-600"
+      :class="{ 'no-anim': !smooth }"
+      :style="{ width: progress + '%' }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.top-progress-container {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.top-progress-container.is-visible {
+  opacity: 1;
+}
+.top-progress-bar {
+  transition: width 0.2s ease;
+}
+.top-progress-bar.no-anim {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .top-progress-container,
+  .top-progress-bar {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/web/tenant/src/router/index.ts b/web/tenant/src/router/index.ts
index 63974be..daf5174 100644
--- a/web/tenant/src/router/index.ts
+++ b/web/tenant/src/router/index.ts
@@ -4,6 +4,7 @@ import tenantRoutes from './tenant'
 import { useTenantAuthStore } from '@/stores/tenant-auth'
 import { shouldRefresh, getRefreshToken } from '@/utils/request'
 import { usePublicSettings } from '@/composables/usePublicSettings'
+import { useTopProgress } from '@/composables/useTopProgress'
 
 const routes: RouteRecordRaw[] = [
 	{
@@ -29,7 +30,11 @@ const router = createRouter({
 	routes,
 })
 
+const { start, done } = useTopProgress()
+
 router.beforeEach((to) => {
+	start()
+
 	const tenantAuthStore = useTenantAuthStore()
 	tenantAuthStore.loadFromStorage()
 
@@ -72,4 +77,12 @@ router.beforeEach((to) => {
 	return true
 })
 
+router.afterEach(() => {
+	done()
+})
+
+router.onError(() => {
+	done()
+})
+
 export default router