/* ═══════════════════════════════════════════════════════════════════ PREMIUM LOADER — Triple Ring + Pulsing Center + Loading Text Project: Savefreely ERP USAGE: 1. Save this file as: Portal/Content/loader.css 2. Add to ALL layouts (in ): 3. Add overlay markup ONCE per layout (just before ): See loader-markup.html for the snippet 4. Existing ajaxindicatorstart() / ajaxindicatorstop() functions will automatically use this — no JS changes needed COMPATIBILITY: - Works with existing $(document).ajaxStart / ajaxStop - Works with manual show/hide via .show() / .hide() - Works with .active class toggle (modern approach) ═══════════════════════════════════════════════════════════════════ */ /* ─── OVERLAY (full-screen backdrop) ─── */ #ajaxLoader, #globalLoader, .app-loader-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 99999; display: none; align-items: center; justify-content: center; flex-direction: column; } #ajaxLoader.active, #globalLoader.active, .app-loader-overlay.active, #ajaxLoader.show, #globalLoader.show, .app-loader-overlay.show { display: flex !important; } /* Body class trigger (for ajaxStart/ajaxStop) */ body.loading #ajaxLoader, body.loading #globalLoader, body.loading .app-loader-overlay { display: flex !important; } /* ─── LOADER WRAPPER ─── */ .app-loader { position: relative; width: 120px; height: 120px; margin-bottom: 30px; } /* ─── RING 1 (outer) ─── */ .app-loader .ring-1, .app-loader .ring-2, .app-loader .ring-3 { position: absolute; border-radius: 50%; border: 5px solid transparent; } .app-loader .ring-1 { inset: 0; border-top-color: #2563eb; border-right-color: rgba(37, 99, 235, 0.3); animation: appLoaderSpin1 1.3s linear infinite; box-shadow: inset 0 0 15px rgba(37, 99, 235, 0.2), 0 0 25px rgba(37, 99, 235, 0.4); } /* ─── RING 2 (middle) ─── */ .app-loader .ring-2 { inset: 16px; border-bottom-color: #60a5fa; border-left-color: rgba(96, 165, 250, 0.3); animation: appLoaderSpin2 0.95s linear infinite; box-shadow: inset 0 0 12px rgba(96, 165, 250, 0.2), 0 0 18px rgba(96, 165, 250, 0.4); } /* ─── RING 3 (inner) ─── */ .app-loader .ring-3 { inset: 32px; border-top-color: #93c5fd; border-right-color: rgba(147, 197, 253, 0.3); animation: appLoaderSpin3 0.65s linear infinite; } /* ─── CENTER GLOWING DOT ─── */ .app-loader .center-dot { position: absolute; inset: 50px; background: radial-gradient(circle, #93c5fd 0%, #2563eb 100%); border-radius: 50%; box-shadow: 0 0 20px #60a5fa, 0 0 40px rgba(96, 165, 250, 0.5); animation: appLoaderPulse 1.5s ease-in-out infinite; } /* ─── LOADING TEXT ─── */ .app-loader-text { color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; font-family: 'Segoe UI', Arial, sans-serif; display: flex; align-items: center; } .app-loader-text::after { content: ''; display: inline-block; width: 24px; text-align: left; margin-left: 4px; animation: appLoaderDots 1.5s steps(4, end) infinite; } /* ─── ANIMATIONS ─── */ @keyframes appLoaderSpin1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes appLoaderSpin2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes appLoaderSpin3 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes appLoaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } @keyframes appLoaderDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* ─── COMPATIBILITY: Hide old loader styles ─── */ /* Agar koi purana spinner abhi bhi reference karta ho */ .ajax-loader-old, .spinner-old, .legacy-loader { display: none !important; } /* ─── INLINE SMALL LOADER (for buttons / specific areas) ─── */ .app-loader-inline { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(37, 99, 235, 0.2); border-top-color: #2563eb; border-radius: 50%; animation: appLoaderSpin1 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } /* When loader shows inside a button */ .btn .app-loader-inline { border-color: rgba(255, 255, 255, 0.3); border-top-color: #ffffff; margin-right: 8px; } /* ─── RESPONSIVE ─── */ @media (max-width: 480px) { .app-loader { width: 90px; height: 90px; margin-bottom: 20px; } .app-loader .ring-1 { border-width: 4px; } .app-loader .ring-2 { inset: 12px; border-width: 4px; } .app-loader .ring-3 { inset: 24px; border-width: 4px; } .app-loader .center-dot { inset: 38px; } .app-loader-text { font-size: 10px; letter-spacing: 3px; } }