/* ===================================================== TruckGuru Page Loader — loader.css Place at: /includes/loader/loader.css Link in header-truckguru-2021.php inside ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500&display=swap'); :root { --tg-orange: #FF6B00; --tg-orange-lt: #FF8C33; --tg-orange-glow: rgba(255, 107, 0, 0.35); --tg-navy: #0D1B2A; --tg-navy-mid: #1A2E45; --tg-grey: #B0BEC5; } /* ── Overlay ── */ #tg-loader { display: none; /* Hidden by default — JS shows it only if page is slow */ position: fixed; inset: 0; background: var(--tg-navy); flex-direction: column; align-items: center; justify-content: center; gap: 26px; z-index: 99999; transition: opacity 0.4s ease, visibility 0.4s ease; } #tg-loader.tg-visible { display: flex; } #tg-loader.tg-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Logo ── */ .tg-logo-wrap { display: flex; align-items: center; gap: 10px; animation: tgFadeDown 0.6s ease both; } .tg-logo-icon { width: 38px; height: 38px; } .tg-logo-text { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 1px; color: #fff; } .tg-logo-text span { color: var(--tg-orange); } /* ── Truck scene ── */ .tg-scene { position: relative; width: 340px; height: 108px; animation: tgFadeUp 0.7s 0.2s ease both; } /* Road */ .tg-road { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: var(--tg-navy-mid); border-radius: 4px; overflow: hidden; } .tg-road::before { content: ''; position: absolute; top: 50%; left: -100%; width: 300%; height: 3px; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 24px, var(--tg-orange) 24px, var(--tg-orange) 48px ); transform: translateY(-50%); animation: tgRoadMove 0.6s linear infinite; } /* Dust */ .tg-dust { position: absolute; bottom: 42px; left: 22px; display: flex; gap: 4px; } .tg-dust span { display: block; width: 6px; height: 6px; background: var(--tg-grey); border-radius: 50%; } .tg-dust span:nth-child(1) { animation: tgDustFloat 0.6s 0.0s ease-in-out infinite alternate; } .tg-dust span:nth-child(2) { animation: tgDustFloat 0.6s 0.1s ease-in-out infinite alternate; width: 8px; height: 8px; } .tg-dust span:nth-child(3) { animation: tgDustFloat 0.6s 0.2s ease-in-out infinite alternate; } /* Truck */ .tg-truck-wrap { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: tgBounce 0.25s ease-in-out infinite alternate; } /* Glow */ .tg-glow { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 160px; height: 18px; background: radial-gradient(ellipse, var(--tg-orange-glow) 0%, transparent 70%); animation: tgGlowPulse 1s ease-in-out infinite alternate; } /* ── Progress bar ── */ .tg-progress-wrap { width: 340px; animation: tgFadeUp 0.7s 0.35s ease both; } .tg-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .tg-status { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--tg-grey); letter-spacing: 2px; text-transform: uppercase; } .tg-pct { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--tg-orange); } .tg-bar-track { width: 100%; height: 5px; background: var(--tg-navy-mid); border-radius: 99px; overflow: hidden; } .tg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--tg-orange), var(--tg-orange-lt)); border-radius: 99px; width: 0%; box-shadow: 0 0 10px var(--tg-orange-glow); transition: width 0.1s linear; } /* ── Tagline ── */ .tg-tagline { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--tg-grey); letter-spacing: 0.5px; animation: tgFadeUp 0.7s 0.5s ease both; } .tg-tagline b { color: var(--tg-orange-lt); font-weight: 600; } /* ══ Keyframes ══ */ @keyframes tgRoadMove { from { transform: translateY(-50%) translateX(0); } to { transform: translateY(-50%) translateX(48px); } } @keyframes tgBounce { from { transform: translateX(-50%) translateY(0px); } to { transform: translateX(-50%) translateY(-2px); } } @keyframes tgGlowPulse { from { opacity: 0.6; transform: translateX(-50%) scaleX(0.9); } to { opacity: 1.0; transform: translateX(-50%) scaleX(1.1); } } @keyframes tgDustFloat { from { transform: translateY(0) scale(1); opacity: 0.5; } to { transform: translateY(-12px) scale(0.3); opacity: 0; } } @keyframes tgFadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes tgFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }