He creado un cargador de página completa ondulado. Estoy tratando de crear uno como aquí . Quiero que el código sea simple sin complementos idealmente. Puedo cargar el precargador de páginas, pero me pregunto cómo hago para que la página de carga desaparezca una vez que se haya cargado la página principal. ¡La página simplemente no se desvanecerá! He investigado y probado todo tipo de métodos. Este es el código hasta ahora:
// Page loading animation $(window).on('load', function() { if ($('.cover').length) { $('.cover').parallax({ imageSrc: $('.cover').data('image'), zIndex: '1' }); } $("#preloader").animate({ 'opacity': '0' }, 600, function() { setTimeout(function() { $("#preloader").css("visibility", "hidden").fadeOut(); }, 300); }); }); #preloader { overflow: hidden; background-color: #fb5849; left: 0; right: 0; top: 0; bottom: 0; position: fixed; z-index: 99999; color: #fff; } #preloader .jumper { left: 0; top: 0; right: 0; bottom: 0; display: block; position: absolute; margin: auto; width: 50px; height: 50px; } #preloader .jumper>div { background-color: #fff; width: 10px; height: 10px; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; width: 50px; height: 50px; -webkit-animation: jumper 1s 0s linear infinite; animation: jumper 1s 0s linear infinite; } #preloader .jumper>div:nth-child(2) { -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; } #preloader .jumper>div:nth-child(3) { -webkit-animation-delay: 0.66666s; animation-delay: 0.66666s; } @-webkit-keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { opacity: 0; } } <div id="preloader"> <div class="jumper"> <div></div> <div></div> <div></div> </div> </div>Puede hacerlo de esta manera, usando JavaScript estándar, que también puede adaptar para jQuery.
Puede eliminar ese
setTimout, agregado solo con fines de prueba.
window.addEventListener("load", () => { setTimeout(() => { document.getElementById("preloader").classList.add("hide"); }, 1000); }); #preloader { overflow: hidden; background-color: #fb5849; left: 0; right: 0; top: 0; bottom: 0; position: fixed; z-index: 99999; color: #fff; opacity: 1; transition: opacity 1s; } #preloader.hide { opacity: 0; pointer-events: none; } #preloader .jumper { left: 0; top: 0; right: 0; bottom: 0; display: block; position: absolute; margin: auto; width: 50px; height: 50px; } #preloader .jumper > div { background-color: #fff; width: 10px; height: 10px; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; width: 50px; height: 50px; -webkit-animation: jumper 1s 0s linear infinite; animation: jumper 1s 0s linear infinite; } #preloader .jumper > div:nth-child(2) { -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; } #preloader .jumper > div:nth-child(3) { -webkit-animation-delay: 0.66666s; animation-delay: 0.66666s; } @-webkit-keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { opacity: 0; } } <div id="preloader"> <div class="jumper"> <div></div> <div></div> <div></div> </div> </div>