Loading Animation

<style> #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 9999; pointer-events: none; overflow: hidden; } /* Soft Golden Shine */ #loader::before { content: ""; position: absolute; top: 0; left: -120%; width: 130%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(212,175,55,0.35), rgba(255,223,120,0.45), rgba(184,134,11,0.3), transparent ); transform: skewX(-18deg); animation: shine 0.5s linear 1 forwards; } /* Secondary Glow */ #loader::after { content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255,215,0,0.25), rgba(255,200,80,0.2), transparent ); transform: skewX(-18deg); animation: shine2 0.5s linear 1 forwards; } /* Sweep */ @keyframes shine { 0% { left: -120%; } 100% { left: 130%; } } @keyframes shine2 { 0% { left: -150%; } 100% { left: 130%; } } /* Fade */ .fade-out { animation: fade 0.5s ease forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } </style> <div id="loader"></div> <script> window.addEventListener("load", function () { var loader = document.getElementById("loader"); setTimeout(function () { loader.classList.add("fade-out"); setTimeout(function () { loader.style.display = "none"; }, 500); }, 900); }); </script>