Why preloader is showing header section

user_18198250 0
Viewed 43

I am currently working on a website cloning project in order to practice HTML5 and become a better front end developer, so I created a preload animation using CSS. It works fine, but the header section, which includes the navigation and logo, is not hidden. How can I fix this? Is there anything wrong with my code?

    $(window).on("load", function() {
      $('.spinner').fadeOut(300);
      $("body").addClass("pageloaded");
  });
:root {
  --primary-color:#0071ce;
  --secondary-color:#ffffff;
}

body{
  min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
  font-family: 'ProximaNova-Semibold', Courier, monospace;
  text-transform: uppercase;
  color: var(--primary-color);
  display: block;
  font-size: 1.2rem;
}
.navbar-custom{
  padding: 25px;
  padding-left: 25px;
}
.navbar-custom a:hover{
  text-decoration: underline;
  color: var(--primary-color);
}
#nav-icons {
  width: 35px;
  height: 45px;
  position: relative;
  margin: 6px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
#nav-icons span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: blue;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(2) {
  top: 11px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(3) {
  top: 21px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 2px;
}
#nav-icons.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icons.open span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  left: 4px;
}
@media (max-width: 767.98px) {
  .navbar-custom{
      padding: 0px;
      padding-left: 25px;
      padding-top: 5px;
      padding-bottom: 5px;
 }
  .navbar-collapse{
      display: block;
      position: absolute;
      width: 150vw;
      height: 150vh;
      left: 0;
      top: 0;
      background: rgba(255, 232, 73, 0.95);
      z-index: 2;
 }
  #nav-icons{
      z-index: 3;
 }
  .navbar-collapse .navbar-nav{
      padding-top: 120px;
      padding-left: 30px;
 }
  .navbar-collapse .navbar-nav {
      -webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
      animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
 }
  .navbar-collapse .navbar-nav li:nth-child(1) {
      animation-delay: 0.1s;
 }
  .navbar-collapse .navbar-nav li:nth-child(2) {
      animation-delay: 0.2s;
 }
  .navbar-collapse .navbar-nav li:nth-child(3) {
      animation-delay: 0.3s;
 }
}
/* top section */
.topsec{
  position: relative;
  padding-top: 165px;
}
.topsec h1{
  font-family: ProximaNova-Extrabld;
  font-size: 3rem;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1;
  max-width: 60rem;
  margin: 0 auto;
  text-align: left;
}

/* restaurants */

.restaurants-section{ 
    background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 10rem 0;
    display: block;
    width: 100%;
}



.restaurants-text{
  padding-top: 100px;
}
.restaurants h3{

    font-size: 40px;
    font-family: "ProximaNova-Semibold",sans-serif;
    color: #fff;
}

.restaurants p{
  font-size: 1rem;
  margin: 0rem 0 1rem;
  line-height: 150%;
  color: white;
}

.restaurants a{
    display: inline-block;
    padding: 5px 25px;
    background: #0071ce;
    color: #ffe800;
    font-size: 20px;
    font-family: "ProximaNova-Bold",sans-serif;
    transition: all 0.3s;
    text-decoration: none;
}

.restaurants a:hover{
  background: #ffe800;
  color: #0071ce;
  transition: all 0.3s;
  text-decoration: underline;
}


@-webkit-keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@-webkit-keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

.sk-three-bounce {
  margin: 40px auto;
  width: 10rem;
  text-align: center;
  margin-top: 48vh;
}

.sk-three-bounce .sk-child {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #0071ce;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.24s;
  animation-delay: -0.24s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce3 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce4 {
  -webkit-animation-delay: -0.08s;
  animation-delay: -0.08s;
  background-color: #0071ce;
}

.section-spinner {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  top: 0;
  left: 0;
  z-index: 999;
  
}

.section-spinner * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
    <title>|Welcome to my website </title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <section class="section-spinner spinner">
         <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
            <div class="sk-child sk-bounce4"></div>
            <div class="sk-child sk-bounce5"></div>
         </div>
      </section>
    <header>
        <nav class="navbar navbar-expand-md navbar-custom fixed-top">
            <div class="container-fluid py-3">
              <a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <div id="nav-icons">
                <span></span><span></span><span></span>
                </div>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="#">home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">about</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">contact us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">I&#039;m Interested</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </header>   
     <div class="container-fluid pb-4">
      <section class="topsec"> <h1>lorem, <br> lorem</h1>
      </section>
     </div>

     <section class="restaurants-section px-5">
     <div class="container-fluid">
      <div class="row justify-content-between restaurants">
        <div class="col-md-6 col-lg-6 restaurants-text">
          <h3>lorem</h3>
          <br>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <a class="read-more" href="#">learn more</a>
        </div>
      </div>
     </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="./js/script.js"></script>
</body>
</html>

css javascript
2 Answers

The easiest fix would be to add some css to hide the navbar until the .pageloaded class is added to the body.

.navbar {
  visibility: hidden;
}
.pageloaded .navbar {
  visibility: visible;
}
user_9434350

Before answering to the question "why the header is showing", let's see why the rest of the body is not showing for the first 300ms.

It is because there is a element .spinner. Its width and height take up 100% of the page. Its position is set to fixed means the element is fixed at top 0 and left 0 (the upper-left corner) according to the CSS. More importantly is fixed position element break the normal document flow. Normally element are rendered top-to-bottom, left-to-right. .spinner being removed from document flow means the spinner was taken out and stick to the top left. Therefore the .spinner with 100% size take up the whole screen and showing the spinning bubble. There is another effect, the place originally occupied for .spinner will be remove and the main body it will be brought up. That means .spinner and the main body is not displayed one after one, but they are stacked together. .spinner being on top and cover the rest is because it has a z-index applied to it, which the value is 999.

Now back to the question, why header is showing. Because of bootstrap, .fixed-top has z-index: 1030, which greater than .spinner's 999. That's why it is on top of the spinner.

The solution you need is, to set the .spinner z-index any value greater than bootstrap's default.

.section-spinner {
  /* ... */
  z-index: 1050;
  
}

Example below.

$(window).on("load", function() {
      $('.spinner').fadeOut(300);
      $("body").addClass("pageloaded");
  });
:root {
  --primary-color:#0071ce;
  --secondary-color:#ffffff;
}

body{
  min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
  font-family: 'ProximaNova-Semibold', Courier, monospace;
  text-transform: uppercase;
  color: var(--primary-color);
  display: block;
  font-size: 1.2rem;
}
.navbar-custom{
  padding: 25px;
  padding-left: 25px;
}
.navbar-custom a:hover{
  text-decoration: underline;
  color: var(--primary-color);
}
#nav-icons {
  width: 35px;
  height: 45px;
  position: relative;
  margin: 6px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
#nav-icons span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: blue;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(2) {
  top: 11px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(3) {
  top: 21px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 2px;
}
#nav-icons.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icons.open span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  left: 4px;
}
@media (max-width: 767.98px) {
  .navbar-custom{
      padding: 0px;
      padding-left: 25px;
      padding-top: 5px;
      padding-bottom: 5px;
 }
  .navbar-collapse{
      display: block;
      position: absolute;
      width: 150vw;
      height: 150vh;
      left: 0;
      top: 0;
      background: rgba(255, 232, 73, 0.95);
      z-index: 2;
 }
  #nav-icons{
      z-index: 3;
 }
  .navbar-collapse .navbar-nav{
      padding-top: 120px;
      padding-left: 30px;
 }
  .navbar-collapse .navbar-nav {
      -webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
      animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
 }
  .navbar-collapse .navbar-nav li:nth-child(1) {
      animation-delay: 0.1s;
 }
  .navbar-collapse .navbar-nav li:nth-child(2) {
      animation-delay: 0.2s;
 }
  .navbar-collapse .navbar-nav li:nth-child(3) {
      animation-delay: 0.3s;
 }
}
/* top section */
.topsec{
  position: relative;
  padding-top: 165px;
}
.topsec h1{
  font-family: ProximaNova-Extrabld;
  font-size: 3rem;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 1;
  max-width: 60rem;
  margin: 0 auto;
  text-align: left;
}

/* restaurants */

.restaurants-section{ 
    background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 10rem 0;
    display: block;
    width: 100%;
}



.restaurants-text{
  padding-top: 100px;
}
.restaurants h3{

    font-size: 40px;
    font-family: "ProximaNova-Semibold",sans-serif;
    color: #fff;
}

.restaurants p{
  font-size: 1rem;
  margin: 0rem 0 1rem;
  line-height: 150%;
  color: white;
}

.restaurants a{
    display: inline-block;
    padding: 5px 25px;
    background: #0071ce;
    color: #ffe800;
    font-size: 20px;
    font-family: "ProximaNova-Bold",sans-serif;
    transition: all 0.3s;
    text-decoration: none;
}

.restaurants a:hover{
  background: #ffe800;
  color: #0071ce;
  transition: all 0.3s;
  text-decoration: underline;
}


@-webkit-keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@-webkit-keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes sk-three-bounce {
  0%,
  100%,
  80% {
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  40% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

.sk-three-bounce {
  margin: 40px auto;
  width: 10rem;
  text-align: center;
  margin-top: 48vh;
}

.sk-three-bounce .sk-child {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #0071ce;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.24s;
  animation-delay: -0.24s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce3 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  background-color: #0071ce;
}

.sk-three-bounce .sk-bounce4 {
  -webkit-animation-delay: -0.08s;
  animation-delay: -0.08s;
  background-color: #0071ce;
}

.section-spinner {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  top: 0;
  left: 0;
  z-index: 1050;
  
}

.section-spinner * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
    <title>|Welcome to my website </title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <section class="section-spinner spinner">
         <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
            <div class="sk-child sk-bounce4"></div>
            <div class="sk-child sk-bounce5"></div>
         </div>
      </section>
    <header>
        <nav class="navbar navbar-expand-md navbar-custom fixed-top">
            <div class="container-fluid py-3">
              <a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <div id="nav-icons">
                <span></span><span></span><span></span>
                </div>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="#">home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">about</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">contact us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">I&#039;m Interested</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </header>   
     <div class="container-fluid pb-4">
      <section class="topsec"> <h1>lorem, <br> lorem</h1>
      </section>
     </div>

     <section class="restaurants-section px-5">
     <div class="container-fluid">
      <div class="row justify-content-between restaurants">
        <div class="col-md-6 col-lg-6 restaurants-text">
          <h3>lorem</h3>
          <br>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <a class="read-more" href="#">learn more</a>
        </div>
      </div>
     </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="./js/script.js"></script>
</body>
</html>

user_55941670
Related