Estoy tratando de que los usuarios vean la pantalla de carga en la que he trabajado. Me gustaría que durara alrededor de 3 a 5 segundos. JQuery está bien porque ya está en uso y aquí está el código y realmente no sé mucho de Jquery, por eso les pido a ustedes que cualquier solución ayudaría a otra nota de que esto va. en el sitio web de una panadería (realmente no sé por qué necesitarías saberlo, pero sí). foto,

 <div class="center"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(window).on("load",function(){ $(".wave").fadeOut("slow"); $(".center").fadeOut("slow"); }); </script> <style> .content{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .bodY { margin: 0; padding: 0; box-sizing: border-box; } .center { height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; } .wave { width: 5px; height: 100px; background: linear-gradient(45deg, cyan, #fff); margin: 10px; animation: wave 1s linear infinite; border-radius: 20px; } .wave:nth-child(2) { animation-delay: 0.1s; } .wave:nth-child(3) { animation-delay: 0.2s; } .wave:nth-child(4) { animation-delay: 0.3s; } .wave:nth-child(5) { animation-delay: 0.4s; } .wave:nth-child(6) { animation-delay: 0.5s; } .wave:nth-child(7) { animation-delay: 0.6s; } .wave:nth-child(8) { animation-delay: 0.7s; } .wave:nth-child(9) { animation-delay: 0.8s; } .wave:nth-child(10) { animation-delay: 0.9s; } @keyframes wave { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } </style>

Realmente no he probado todo porque, una vez más, no sé mucho de Jquery, pero elegiré la parte de Jquery,

 $(window).on("load",function(){ $(".wave").fadeOut("slow"); $(".center").fadeOut("slow"); });