Home > other >  Why preloader is showing header section
Why preloader is showing header section

Time：04-18

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <section >
         <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
         </div>
      </section>
    <header>
        <nav >
            <div >
              <a  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  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  id="navbarSupportedContent">
                <ul >
                  <li >
                    <a  aria-current="page" href="#">home</a>
                  </li>
                  <li >
                    <a  href="#">about</a>
                  </li>
                  <li >
                    <a  href="#">contact us</a>
                  </li>
                  <li >
                    <a  href="#">I&#039;m Interested</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </header>   
     <div >
      <section > <h1>lorem, <br> lorem</h1>
      </section>
     </div>

     <section >
     <div >
      <div >
        <div >
          <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  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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="./js/script.js"></script>
</body>
</html>

CodePudding user response：

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;
}

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <section >
         <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
         </div>
      </section>
    <header>
        <nav >
            <div >
              <a  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  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  id="navbarSupportedContent">
                <ul >
                  <li >
                    <a  aria-current="page" href="#">home</a>
                  </li>
                  <li >
                    <a  href="#">about</a>
                  </li>
                  <li >
                    <a  href="#">contact us</a>
                  </li>
                  <li >
                    <a  href="#">I&#039;m Interested</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </header>   
     <div >
      <section > <h1>lorem, <br> lorem</h1>
      </section>
     </div>

     <section >
     <div >
      <div >
        <div >
          <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  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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="./js/script.js"></script>
</body>
</html>

Page link：https//www.codepudding.com/other/375865.html

Prev:PWA specific CSS
Next:prefers-color-scheme default styles vs light
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding