CODEWITHSUNDEEP
htmlcss
Abhishek
Abhishek

Reputation: 159

How to add a bootstrap spinner icon to a middle of a page in the background?

I have a html page where on every page reload I want to show a background loader icon. I have used bootstrap spinner icon, but I can't add it to the center of the page.

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

Upvotes: 4

Views: 18278

Answers (4)

Muhammad Nabeel
Muhammad Nabeel

Reputation: 790

This is straight forward approach and the best one for me :)

HTML

<div class="myspinner">
  <div class="spinner-border" role="status">
  </div>
</div>

CSS

.myspinner {
 height: 100vh;
 display:flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

JS Fiddle Demo: https://jsfiddle.net/36xrf9mp/5/

Upvotes: 1

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 1128

You must to remove the display: none and adjust the top position like this : 

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

Upvotes: 9

Fareed Khan
Fareed Khan

Reputation: 2923

here is the solution 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);
    }

Upvotes: 0

Hexa
Hexa

Reputation: 11

Add class "align-items-center" like this.

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

Upvotes: 1

Related Questions