Override preloader div to a Section element

Question

Override preloader div to a Section element

Asked 4 years ago

Viewed 47 times

0

I need to add a div preloader at the centre of an element article!

I don’t want this preloader to expand into the whole body, because the laterial menu is static!

So I want him to occupy only the element article and overlap the element section until the data from this section are ready to be displayed after a request.

I created an example, with a setTimout simulating a display time of preloader.

But in the example, the preloader is not overlapping the section, but pushing it down low.

<!DOCTYPE html>
<html>
  <head>  
    <meta charset="utf-8">      
        <title>Template</title>
        <meta name="description" content="Description of site" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head> 
    <body>
        <div class="content">
            <header id="header">
            </header>
            <main id="main">
                <nav id="nav-left">
                </nav>
                <article id="article">
                    <div id="breadcrumb">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                            </ol>
                        </nav>
                    </div>
                    <div id="preloader" class="page-loader-wrapper">
                        <div class="loader">
                            <div class="loader-wheel"></div>
                            <div class="loader-text"></div>
                        </div>
                    </div>
                    <section id="section"></section>
                    <footer id="footer">Footer</footer>
                </article>
            </main>
        </div>            
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script>
            let loader = document.getElementById('preloader');
            setTimeout(function(){ loader.style.display = 'none'; }, 1500);
        </script>
    </body>
</html>
<style>
body {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
#content {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}
#header {
    border-bottom: 1px solid transparent;
    background-color: #404bb3;
    color: #fff;
}
@media (min-width: 768px) {
    #header {
        height: 3.5rem;
    }
}
@media (min-width: 768px) {
    #main {
        height: calc(100vh - 3.5rem);
    }
}
#main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: calc(100vh - 3rem);
    z-index: 0;
}
@media (min-width: 768px) {
    #nav-left {
        position: relative;
    }
}
#nav-left {
    background-color: #fff;
    border-right: 1px solid #000;
    z-index: 9000;
    min-width: 15.625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
    #article {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        width: calc(100vw - 15.625rem);
    }
}
#article {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#breadcrumb {
    border-bottom: 1px solid #000;
    padding: 0 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 3rem;
    flex: 0 1 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.breadcrumb {
    background-color: transparent;
    margin: 0;
    padding: 0;
}

/* loading */
.page-loader-wrapper {
    align-items: center;
    background-color: black;
    display: flex;
    height: 87%;
    justify-content: center;
    margin: 0;
    opacity: 0.5;
}
.loader {
    width: 60px;
}
.loader-wheel {
    animation: spin 1s infinite linear;
    border: 2px solid rgb(212 216 245);
    border-left: 4px solid #404bb3;
    border-radius: 50%;
    height: 50px;
    margin-bottom: 10px;
    width: 50px;
}
.loader-text {
    color: #404bb3;
    font-family: arial, sans-serif;
}
#section {
    background-color: #9932cc;
    border-bottom: 1px solid #000;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 15px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}
@media (min-width: 768px) {
    #footer {
        padding: 0 1rem;
        -webkit-box-pack: justify;
        -ms- flex-pack: justify;
        justify-content: space-between;
    }
}
#footer {
    font-size: 80%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 3rem;
    flex: 0 1 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
</style>

1 answer

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2020-12-21T13:46:14+00:00

Face a solution is you put position:absolute in the preloader, so he runs away from the flow of content, then you put width discounting the width of the sidebar and in the heigh you put a height discounting the height of the footer or whatever you need, use the calc() CSS, like height: calc(100% - 97px);

Code of the image above:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Template</title>
<meta name="description" content="Description of site" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
  body {
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  #content {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
  }

  #header {
    border-bottom: 1px solid transparent;
    background-color: #404bb3;
    color: #fff;
  }

  @media (min-width: 768px) {
    #header {
      height: 3.5rem;
    }
  }

  @media (min-width: 768px) {
    #main {
      height: calc(100vh - 3.5rem);
    }
  }

  #main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: calc(100vh - 3rem);
    z-index: 0;
  }

  @media (min-width: 768px) {
    #nav-left {
      position: relative;
    }
  }

  #nav-left {
    background-color: #fff;
    border-right: 1px solid #000;
    z-index: 9000;
    min-width: 15.625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  @media (min-width: 768px) {
    #article {
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      width: calc(100vw - 15.625rem);
    }
  }

  #article {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #breadcrumb {
    border-bottom: 1px solid #000;
    padding: 0 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 3rem;
    flex: 0 1 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .breadcrumb {
    background-color: transparent;
    margin: 0;
    padding: 0;
  }

  /* loading */
  .page-loader-wrapper {
    align-items: center;
    background-color: black;
    display: flex;
    justify-content: center;
    margin: 0;
    opacity: 0.5;
    height: calc(100% - 97px);
    position: absolute;
    width: calc(100% - 15.625rem);
  }

  .loader {
    width: 60px;
  }

  .loader-wheel {
    animation: spin 1s infinite linear;
    border: 2px solid rgb(212 216 245);
    border-left: 4px solid #404bb3;
    border-radius: 50%;
    height: 50px;
    margin-bottom: 10px;
    width: 50px;
  }

  .loader-text {
    color: #404bb3;
    font-family: arial, sans-serif;
  }

  #section {
    background-color: #9932cc;
    border-bottom: 1px solid #000;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 15px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  @media (min-width: 768px) {
    #footer {
      padding: 0 1rem;
      -webkit-box-pack: justify;
      -ms- flex-pack: justify;
      justify-content: space-between;
    }
  }

  #footer {
    font-size: 80%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 3rem;
    flex: 0 1 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
</style>

</head>

<body>
  <div class="content">
    <header id="header">
    </header>
    <main id="main">
      <nav id="nav-left">
      </nav>
      <article id="article">
        <div id="breadcrumb">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
          </nav>
        </div>
        <div id="preloader" class="page-loader-wrapper">
          <div class="loader">
            <div class="loader-wheel"></div>
            <div class="loader-text"></div>
          </div>
        </div>
        <section id="section"></section>
        <footer id="footer">Footer</footer>
      </article>
    </main>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    // let loader = document.getElementById('preloader');
    // setTimeout(function() {
    //   loader.style.display = 'none';
    // }, 1500);
  </script>
</body>

</html>