/* Basic layout */ #wap-preloader { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index:999999; background: #ffffff; transition: opacity .4s ease; } .wap-theme-dark { background:#111; color:#fff; } .wap-theme-minimal { background:transparent; backdrop-filter: blur(4px); } /* inner */ .wap-inner { text-align:center; } .wap-image-wrap { position:relative; display:inline-block; } #wap-image { max-width:180px; display:block; } /* Fill overlay for "fill" effect */ .wap-image-fill { position:absolute; left:0; right:0; bottom:0; top:0; pointer-events:none; background:rgba(0,0,0,0.25); transform-origin: bottom; transform: scaleY(0); } /* text */ #wap-text { font-size:22px; margin-top:16px; font-weight:600; } /* progress */ #wap-progress { width:60%; height:6px; background:rgba(0,0,0,0.08); margin:18px auto 0; border-radius:4px; overflow:hidden;} #wap-progress-bar { width:0%; height:100%; background:linear-gradient(90deg,#4caf50,#2b8cff); transition:width .2s linear; } /* Hide */ #wap-preloader.wap-hidden { opacity:0; pointer-events:none; visibility:hidden; } /* rotation animation */ @keyframes wap-rotate { from{transform:rotate(0)} to{transform:rotate(360deg);} } .wap-rotate { animation: wap-rotate 1.8s linear infinite; }