[DOCS] 更新 RBAC 實作規範與角色初始化流程建議

resources/css/app.css

@@ -61,6 +61,66 @@
         animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     }
 
+    /* Additional Loading Animations */
+    @keyframes fadeInRight {
+        from {
+            opacity: 0;
+            transform: translateX(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .animate-fade-in-right {
+        animation: fadeInRight 0.8s ease-out forwards;
+    }
+
+    @keyframes trickle {
+        0% { width: 0%; opacity: 1; }
+        20% { width: 30%; }
+        50% { width: 70%; }
+        80% { width: 90%; }
+        95% { width: 95%; }
+        100% { width: 95%; }
+    }
+
+    .animate-trickle {
+        animation: trickle 10s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
+    }
+
+    /* Top Progress Bar (Trickle Style) */
+    .top-loading-bar {
+        @apply fixed top-0 left-0 right-0 h-0.5 z-[99999] bg-gradient-to-r from-cyan-500 to-blue-500 opacity-0 transition-opacity duration-300;
+        width: 0%;
+    }
+    
+    .top-loading-bar.loading {
+        @apply opacity-100;
+        animation: trickle 12s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
+    }
+
+    @keyframes loadingPulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.6; }
+        100% { opacity: 1; }
+    }
+
+    /* Skeleton Loading Utilities (Option C) */
+    .skeleton {
+        @apply bg-slate-100 dark:bg-slate-800 animate-pulse-subtle rounded-lg overflow-hidden relative border-none !text-transparent selection:bg-transparent pointer-events-none;
+    }
+
+    @keyframes pulse-subtle {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    .animate-pulse-subtle {
+        animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
     /* Custom Scrollbar - Minimal & Elegant */
     ::-webkit-scrollbar {
         width: 6px;