diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css index 79e302d1..d8245658 100644 --- a/packages/web/src/styles/globals.css +++ b/packages/web/src/styles/globals.css @@ -352,6 +352,27 @@ animation: gradientPulse 4s ease-in-out infinite; } +/* ── Skeleton Loading ── */ +@keyframes shimmer { + 0% { background-position: -400px 0; } + 100% { background-position: 400px 0; } +} + +.skeleton { + background: linear-gradient(90deg, + rgba(255,255,255,0.04) 0%, + rgba(255,255,255,0.08) 40%, + rgba(255,255,255,0.04) 80% + ); + background-size: 400px 100%; + animation: shimmer 1.8s ease-in-out infinite; + border-radius: 4px; +} + +.skeleton-circle { border-radius: 50%; } +.skeleton-bar { height: 12px; border-radius: 6px; } +.skeleton-block { border-radius: 8px; } + @keyframes search-flash { 0% { background-color: rgba(124, 108, 246, 0.2); } 100% { background-color: transparent; } @@ -464,6 +485,7 @@ .animate-call-glow, .animate-call-button-glow { animation: none !important; } .call-refraction::after { animation: none !important; opacity: 0; } + .skeleton { animation: none; } } /* ── MOBILE SCREEN TRANSITIONS ── */