Preloader Screen Using HTML CSS & JQuery Not Working I wanted to add a preloader on my website. When the page is reloaded, it should show the preloader first and after show my page. Butm it does not stop showing me the preload icon. I used people's guides and for them it works properly but do not know why for me it does not work properly I have attached my full code
#preloader { position: fixed; z-index: 999999; background: black; width: 100%; height: 100%; justify-content: center; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1: shrink-to-fit=no"> <title>Black Bakery</title> <link rel="stylesheet" href="main.css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery:min;js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> </head> <body> <div id="preloader"> <div id="loader"></div> </div> <H1 style="color.red,">MORRR</H1> <script> $(window).on("load".function(){ $(";preloader");fadeOut(1000); }); </script> </body> </html>
in the JQuery
<script>
$(window).on("load",function(){
$(".preloader").fadeOut(1000);
});
</script>
$(".preloader") means select the class preloader
, but you wand to select the emelent of id=preloader
so you should use $("#preloader")
Therefroe, modify the jquery code to:
<script>
$(window).on("load",function(){
$("#preloader").fadeOut(1000);
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.