0

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>

inserir a descrição da imagem aqui

1 Resposta 1

1

Cara uma solução é vc colocar position:absolute no preloader, assim ele foge do fluxo de conteúdo, depois vc coloca width descontando a largura da sidebar e no heigh vc coloca uma altura descontando a altura do footer ou o que precisar, para isso use o calc() do CSS, tipo height: calc(100% - 97px);

inserir a descrição da imagem aqui

Código da imagem acima:

<!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>

2
  • @hugocsv, isso resolve sim minha questão, mas desta forma, como posso alinhar o loader exatamente no centro. Commented 21/12/2020 às 14:14
  • @WagnerFillio cara me desculpe, não é width: 100% como eu havia falado!! Na verdade assim como no height, vc tem que descontar a largura da sidebar do width, ficando width: calc(100% - 15.625rem);, já atualizei na resposta e na imagem
    – hugocsl
    Commented 21/12/2020 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .