Как добавить значок блесны bootstrap в середину страницы в фоновом режиме? - PullRequest
Новая
       0

Как добавить значок блесны bootstrap в середину страницы в фоновом режиме?

0 голосов
/ 06 апреля 2020

У меня есть страница html, где на каждой перезагрузке страницы я хочу показать значок загрузчика фона. Я использовал значок bootstrap spinner, но не могу добавить его в центр страницы. 

<html>
<style>
  .overlay {
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    opacity: .5; 
    filter: alpha(opacity=50); 
    display: none;
  }
</style>
<body>
<div class="overlay">
  <div class="d-flex justify-content-center">  
    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
<!-- here goes the main content -->
<!-- here goes the main content -->
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 06 апреля 2020

вот решение CSS

    .overlay {
        background-color: #EFEFEF;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: .5;
        filter: alpha(opacity=50);
    }
0 голосов
/ 06 апреля 2020

Вы должны удалить display: none и отрегулировать верхнее положение следующим образом: 

 .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 40%;
    left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
 }
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="overlay">
      <div class="d-flex justify-content-center">  
        <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
    <!-- here goes the main content -->
  </body>
</html>
0 голосов
/ 06 апреля 2020

Добавьте класс «align-items-center» следующим образом. 

<div class="overlay d-flex justify-content-center align-items-center">
  <div class="">  
    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...