diff --git a/packages/apps/src/app/globals.css b/packages/apps/src/app/globals.css
index ef4ba7b6e..5fd10538f 100644
--- a/packages/apps/src/app/globals.css
+++ b/packages/apps/src/app/globals.css
@@ -50,6 +50,21 @@ body {
   background: linear-gradient(180deg, #02061f 0%, #1c1837 100%);
 }
 
+.loading-bar {
+  background: linear-gradient(90deg, #ffffff 35%, #00b2ff 50%, #ffffff 65%);
+  background-position: 100% 50%;
+  background-size: 40% 100%;
+  animation: bar-loading 2.4s linear infinite;
+}
+@keyframes bar-loading {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
 .refresh-countdown {
   animation: countdown-dash 9.3s linear infinite;
   animation-delay: 0.7s;
diff --git a/packages/apps/src/app/loading.tsx b/packages/apps/src/app/loading.tsx
new file mode 100644
index 000000000..1083f32e2
--- /dev/null
+++ b/packages/apps/src/app/loading.tsx
@@ -0,0 +1,9 @@
+import CountLoading from "@/ui/count-loading";
+
+export default function Loading() {
+  return (
+    <div className="app-main flex items-center justify-center">
+      <CountLoading size="large" />
+    </div>
+  );
+}
diff --git a/packages/apps/src/app/records/[id]/loading.tsx b/packages/apps/src/app/records/[id]/loading.tsx
new file mode 100644
index 000000000..f48a573e2
--- /dev/null
+++ b/packages/apps/src/app/records/[id]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <main className="app-main">
+      <div className="loading-bar fixed left-0 top-0 z-50 h-[2px] w-full" />
+    </main>
+  );
+}
diff --git a/packages/apps/src/app/records/loading.tsx b/packages/apps/src/app/records/loading.tsx
new file mode 100644
index 000000000..f48a573e2
--- /dev/null
+++ b/packages/apps/src/app/records/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <main className="app-main">
+      <div className="loading-bar fixed left-0 top-0 z-50 h-[2px] w-full" />
+    </main>
+  );
+}