Preloader Screen Using HTML CSS & JQuery Not Working

Question

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>

$(".preloader") is wrong... you need to get the id: $("#preloader") — SubCore
– SubCore, Commented Jan 29, 2021 at 16:54
Hi @MorBiton, it's often useful to open your browser's dev tools and check in the console that there are no errors - this one would probably have been picked up - such mistakes are easily made! — A Haworth
– A Haworth, Commented Jan 29, 2021 at 17:00

Nour-Allah Hussein · Accepted Answer · 2021-01-29 19:45:06Z

1

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>

edited Jan 29, 2021 at 19:45

answered Jan 29, 2021 at 17:21

Nour-Allah Hussein

1,4591 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Preloader Screen Using HTML CSS & JQuery Not Working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related