/** * Combination Preloader — full-page overlay & spinner styles * * The overlay div is injected into the page via the header hook template. * It is hidden by default; adding the class "kr-cp-loading" to * makes it visible as a fixed full-page overlay. */ /* ── Overlay: hidden by default ───────────────────────────── */ .kr-cp-overlay { display: none; } /* ── Overlay: visible when body has loading class ─────────── */ .kr-cp-loading .kr-cp-overlay { display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 99999; } /* ── Spinner ring (centered, fixed) ───────────────────────── */ .kr-cp-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; z-index: 999999; } .kr-cp-spinner div { box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 8px solid transparent; border-top-color: #ff4358; border-radius: 50%; background: #ffffff; animation: kr-cp-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .kr-cp-spinner div:nth-child(1) { animation-delay: -0.45s; } .kr-cp-spinner div:nth-child(2) { animation-delay: -0.30s; } .kr-cp-spinner div:nth-child(3) { animation-delay: -0.15s; } @keyframes kr-cp-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }