как сделать чтобы этот прелоадер исчезал плавно? код <div class="preloader" id="preloader"> <div> <img src="https://nztcdn.com/files/49e14e19-1a8d-4199-bf5a-222a2bb8449a.webp" height="52" alt="sueta"/> </div> </div> <style type="text/css"> .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #222b38; z-index: 99 } .preloader div { background: #2e3a4a; width: 152px; height: 152px; line-height: 100px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; margin: auto } </style> <script type="text/javascript"> window.onload = function() { setTimeout(function() { document.getElementById("preloader").style.display = "none"; }, 400); }; </script> HTML <div class="preloader" id="preloader"> <div> <img src="https://nztcdn.com/files/49e14e19-1a8d-4199-bf5a-222a2bb8449a.webp" height="52" alt="sueta"/> </div> </div> <style type="text/css"> .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #222b38; z-index: 99 } .preloader div { background: #2e3a4a; width: 152px; height: 152px; line-height: 100px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; margin: auto } </style> <script type="text/javascript"> window.onload = function() { setTimeout(function() { document.getElementById("preloader").style.display = "none"; }, 400); }; </script>
типо такого мб <!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="preloader" id="preloader"> <div> <img src="https://nztcdn.com/files/49e14e19-1a8d-4199-bf5a-222a2bb8449a.webp" height="52" alt="sueta" /> </div> </div> <style type="text/css"> .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #222b38; z-index: 99; opacity: 1; transition: opacity 0.35s linear; } .preloader div { background: #2e3a4a; width: 152px; height: 152px; line-height: 100px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <script type="text/javascript"> window.onload = function () { const preloader = document.getElementById("preloader"); setTimeout(function () { preloader.style.opacity = "0"; }, 400); }; </script> </body> </html> Code <!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="preloader" id="preloader"> <div> <img src="https://nztcdn.com/files/49e14e19-1a8d-4199-bf5a-222a2bb8449a.webp" height="52" alt="sueta" /> </div> </div> <style type="text/css"> .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #222b38; z-index: 99; opacity: 1; transition: opacity 0.35s linear; } .preloader div { background: #2e3a4a; width: 152px; height: 152px; line-height: 100px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <script type="text/javascript"> window.onload = function () { const preloader = document.getElementById("preloader"); setTimeout(function () { preloader.style.opacity = "0"; }, 400); }; </script> </body> </html>