/* ========================================================= OddeminBet Global Page Loader File: assets/css/loader.css Add this stylesheet in your page . ========================================================= */ :root { --ob-loader-bg: #1c2222; --ob-loader-panel: #252c2c; --ob-loader-green: #23ec89; --ob-loader-green-dark: #128c4e; --ob-loader-text: #eef4f1; --ob-loader-muted: #9aa8a5; } .ob-page-loader { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, rgba(35, 236, 137, 0.14), transparent 34%), linear-gradient(180deg, #222929 0%, var(--ob-loader-bg) 100%); opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0.45s ease; } .ob-page-loader.ob-loaded { opacity: 0; visibility: hidden; pointer-events: none; } .ob-loader-box { width: 190px; min-height: 190px; border-radius: 34px; background: rgba(37, 44, 44, 0.82); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38), 0 0 55px rgba(35, 236, 137, 0.13); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: obLoaderFloat 2.2s ease-in-out infinite; } .ob-loader-mark { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(35, 236, 137, 0.45)); animation: obLogoPulse 1.35s ease-in-out infinite; } .ob-loader-ring { width: 54px; height: 54px; border-radius: 999px; border: 4px solid rgba(255, 255, 255, 0.08); border-top-color: var(--ob-loader-green); border-right-color: rgba(35, 236, 137, 0.55); animation: obSpin 0.9s linear infinite; } .ob-loader-text { color: var(--ob-loader-muted); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } @keyframes obSpin { to { transform: rotate(360deg); } } @keyframes obLogoPulse { 0%, 100% { transform: scale(1); opacity: 0.94; } 50% { transform: scale(1.07); opacity: 1; } } @keyframes obLoaderFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .ob-loader-box, .ob-loader-mark, .ob-loader-ring { animation: none; } }