/** * IW — Global loading overlay. * * Reusable full-page overlay với center spinner. Toggle qua window.IWLoading.show/hide * (xem assets/js/iw-loading-overlay.js). * * Singleton DOM: 1 instance lazy-create, attach vào . Stack-safe qua * counter trong JS (show 3 lần → hide 3 lần mới ẩn). */ .iw-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; } .iw-overlay--visible { opacity: 1; pointer-events: auto; } .iw-overlay__spinner { width: 44px; height: 44px; border: 4px solid rgba(255, 255, 255, 0.25); border-top-color: #ffffff; border-radius: 50%; animation: iw-overlay-spin 0.8s linear infinite; } .iw-overlay__message { margin: 0; font-size: 14px; color: #ffffff; font-weight: 500; } .iw-overlay__message:empty { display: none; } @keyframes iw-overlay-spin { to { transform: rotate(360deg); } } /* Reduce motion: dùng pulse thay vì spin */ @media (prefers-reduced-motion: reduce) { .iw-overlay__spinner { animation: iw-overlay-pulse 1.4s ease-in-out infinite; border-top-color: rgba(255, 255, 255, 0.25); background: #ffffff; } @keyframes iw-overlay-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } }