<div class="preloader"> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background:0 0;transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);"> <circle cx="50" cy="50" r="4.719" fill="none" stroke="#1d3f72" stroke-width="2"> <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="-1.5s" repeatCount="indefinite"/> <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="-1.5s" repeatCount="indefinite"/> </circle><circle cx="50" cy="50" r="27.591" fill="none" stroke="#5699d2" stroke-width="2"> <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"/> <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"/> </circle> </svg> </div> .preloader { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; background: rgb(23, 22, 22); position: fixed; top: 0; left: 0; z-index: 9999; transition: opacity 0.3s linear; } const preloader = document.querySelector('.preloader'); const fadeEffect = setInterval(() => { // if we don't set opacity 1 in CSS, then //it will be equaled to "", that's why we // check it if (!preloader.style.opacity) { preloader.style.opacity = 1; } if (preloader.style.opacity > 0) { preloader.style.opacity -= 0.1; } else { clearInterval(fadeEffect); preloader.style.display="none"; } }, 200); window.addEventListener('load', fadeEffect);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter