diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 928edefc2..b558a7f49 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -25,6 +25,7 @@ import { OpenClawPanel } from '@/components/ai/openclaw-panel'
 import { HostGrid, type HostInfo, type HostService } from '@/components/infra/host-grid'
 import { AppLayout } from '@/components/layout'
 import { PageTabs, type TabConfig } from '@/components/layout/page-tabs'
+import { LobsterLoading } from '@/components/shared/lobster-loading'
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
 
@@ -49,7 +50,7 @@ function AlertsAndApprovalsTab() {
     }).finally(() => setLoading(false))
   }, [])
 
-  if (loading) return <div style={{ padding: 32, textAlign: 'center', color: '#87867f' }}>{tc('loading')}</div>
+  if (loading) return <LobsterLoading />
 
   return (
     <div style={{ display: 'flex', gap: 20, padding: '16px 20px', flex: 1, overflow: 'hidden' }}>
@@ -151,7 +152,7 @@ function DispositionTab() {
       .finally(() => setLoading(false))
   }, [])
 
-  if (loading) return <div style={{ padding: 32, textAlign: 'center', color: '#87867f' }}>{tc('loading')}</div>
+  if (loading) return <LobsterLoading />
 
   const s = data?.summary
   if (!s || s.total === 0) return (
@@ -906,9 +907,7 @@ export default function Home({ params }: { params: { locale: string } }) {
 
             <div style={{ flex: 1, overflowY: 'auto', padding: '14px' }}>
               {isIncidentsLoading ? (
-                <div style={{ display: 'flex', justifyContent: 'center', padding: 32 }}>
-                  <span style={{ fontSize: 13, color: '#b0ad9f' }}>{tCommon('loading')}</span>
-                </div>
+                <LobsterLoading size="sm" />
               ) : incidentsError ? (
                 <div style={{ padding: 16, fontSize: 13, color: '#cc2200' }}>{incidentsError}</div>
               ) : (incidents?.length ?? 0) === 0 ? (
diff --git a/apps/web/src/components/layout/page-tabs.tsx b/apps/web/src/components/layout/page-tabs.tsx
index 43b6bb4ce..acfdcb6b5 100644
--- a/apps/web/src/components/layout/page-tabs.tsx
+++ b/apps/web/src/components/layout/page-tabs.tsx
@@ -56,10 +56,29 @@ export interface PageTabsProps {
 
 function TabSkeleton() {
   return (
-    <div className="flex flex-col gap-4 p-6 animate-pulse">
-      <div className="h-6 w-48 rounded bg-[#e0ddd4]/50" />
-      <div className="h-32 rounded-lg bg-[#e0ddd4]/30" />
-      <div className="h-24 rounded-lg bg-[#e0ddd4]/20" />
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 48, gap: 8 }}>
+      <style>{`
+        @keyframes tab-lobster-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
+        @keyframes tab-lobster-wave { 0%,100%{opacity:.4} 50%{opacity:1} }
+      `}</style>
+      <div style={{ animation: 'tab-lobster-bob 1.2s ease-in-out infinite' }}>
+        <svg width="32" height="36" viewBox="0 0 18 20" fill="none">
+          <ellipse cx="9" cy="13" rx="5.5" ry="6.5" fill="#E85530" opacity="0.9" />
+          <circle cx="9" cy="7.5" r="4.5" fill="#E85530" opacity="0.9" />
+          <circle cx="7" cy="6.5" r="1" fill="#b03a1a" />
+          <circle cx="11" cy="6.5" r="1" fill="#b03a1a" />
+          <path d="M3.5 10 Q1 9 1.5 12 Q2 14 4 13" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+          <ellipse cx="1.5" cy="12" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(-10 1.5 12)" />
+          <path d="M14.5 10 Q17 9 16.5 12 Q16 14 14 13" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+          <ellipse cx="16.5" cy="12" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(10 16.5 12)" />
+          <path d="M7 3 Q5 1 3 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round" />
+          <path d="M11 3 Q13 1 15 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round" />
+          <path d="M6 19 Q9 21 12 19" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+        </svg>
+      </div>
+      <span style={{ fontSize: 12, color: '#87867f', fontFamily: "'DM Mono', monospace", animation: 'tab-lobster-wave 2s ease-in-out infinite' }}>
+        載入中...
+      </span>
     </div>
   )
 }
diff --git a/apps/web/src/components/shared/lobster-loading.tsx b/apps/web/src/components/shared/lobster-loading.tsx
new file mode 100644
index 000000000..2b2daa4d9
--- /dev/null
+++ b/apps/web/src/components/shared/lobster-loading.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+/**
+ * LobsterLoading — 小龍蝦載入動畫
+ * =================================
+ * Sprint 5: 所有「載入中」用小龍蝦動畫取代純文字
+ * 設計: Q版龍蝦上下浮動 + 文字提示
+ *
+ * 建立時間: 2026-04-08 (台北時區)
+ */
+
+import { useTranslations } from 'next-intl'
+
+interface LobsterLoadingProps {
+  /** 自訂提示文字 (預設 '載入中...') */
+  text?: string
+  /** 大小: 'sm' (24px) | 'md' (36px) | 'lg' (48px) */
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const SIZES = {
+  sm: { svg: 24, bob: 2, fontSize: 11 },
+  md: { svg: 36, bob: 3, fontSize: 12 },
+  lg: { svg: 48, bob: 4, fontSize: 13 },
+}
+
+export function LobsterLoading({ text, size = 'md' }: LobsterLoadingProps) {
+  const tc = useTranslations('common')
+  const s = SIZES[size]
+  const displayText = text ?? tc('loading')
+
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+      padding: size === 'lg' ? 48 : size === 'md' ? 32 : 16,
+      gap: 8,
+    }}>
+      <style>{`
+        @keyframes lobster-loading-bob {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-${s.bob}px); }
+        }
+        @keyframes lobster-loading-wave {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+      <div style={{ animation: 'lobster-loading-bob 1.2s ease-in-out infinite' }}>
+        <svg width={s.svg} height={Math.round(s.svg * 20 / 18)} viewBox="0 0 18 20" fill="none">
+          <ellipse cx="9" cy="13" rx="5.5" ry="6.5" fill="#E85530" opacity="0.9" />
+          <circle cx="9" cy="7.5" r="4.5" fill="#E85530" opacity="0.9" />
+          <circle cx="7" cy="6.5" r="1" fill="#b03a1a" />
+          <circle cx="11" cy="6.5" r="1" fill="#b03a1a" />
+          {/* 左鉗 */}
+          <path d="M3.5 10 Q1 9 1.5 12 Q2 14 4 13" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+          <ellipse cx="1.5" cy="12" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(-10 1.5 12)" />
+          {/* 右鉗 */}
+          <path d="M14.5 10 Q17 9 16.5 12 Q16 14 14 13" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+          <ellipse cx="16.5" cy="12" rx="1.2" ry="1.5" fill="#E85530" opacity="0.7" transform="rotate(10 16.5 12)" />
+          {/* 觸角 */}
+          <path d="M7 3 Q5 1 3 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round" />
+          <path d="M11 3 Q13 1 15 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round" />
+          {/* 尾巴 */}
+          <path d="M6 19 Q9 21 12 19" stroke="#E85530" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+        </svg>
+      </div>
+      <div style={{
+        fontSize: s.fontSize,
+        color: '#87867f',
+        fontFamily: "'DM Mono', monospace",
+        animation: 'lobster-loading-wave 2s ease-in-out infinite',
+      }}>
+        {displayText}
+      </div>
+    </div>
+  )
+}
+
+export default LobsterLoading