Preciso adicionar um div preloader
no centro de um elemento article
!
Não quero que este preloader se expanda para todo o body
, pois o menu laterial é estatico!
Então quero que ele ocupe somente o elemento article
e sobreponha o elemento section
até que os dados deste section
estejam prontos para serem exibidos apos uma requisição.
Criei um exemplo, com um setTimout
simulando um tempo de exibição do preloader
.
Porem no exemplo, o preloader
não está sobrepondo o section
, mas empurrando ele pre baixo.
<!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>