CODEWITHSUNDEEP
javascripthtmljquerycss
Mor Biton
Mor Biton

Reputation: 13

Preloader Screen Using HTML CSS & JQuery Not Working

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>

Upvotes: 0

Views: 1690

Answers (1)

Nour-Allah Hussein
Nour-Allah Hussein

Reputation: 1449

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>

Upvotes: 1

Related Questions