Vertically Centered Loading Spinner Overlay

Vertically Centered Loading Spinner Overlay

Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:

<div id="pluswrap">
  <div class="plus">
    Loading...
  </div>
</div>

Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.

#pluswrap {
  position: fixed;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
  top: 0;
}

.plus {
  display: flex;
  margin: 0 auto;
}

This way, you can even color the background, make it semi-transparent etc.

Here's a JSFiddle

How to center a spinner horizontally and vertically in page?

Since it is fixed, the top|left|right|bottom attributes are relative to the window. So a position in percentages, in this case 50% should do the trick.

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* half of the elements height */
  margin-right: -..px; /* half of the elements width */
}

Alternative, given by Utkanos in the comments

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */
  right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */
}

How do I center my span vertically in my overlay div?

You can use flexbox for this

let loadingOverlay = <div style={{
  position: 'absolute',
  opacity: 0.7,
  width: '100%',
  height: '100%',
  color: 'white',
  backgroundColor: 'DarkGrey',
  zIndex: 1,
  border: 0, padding: 0, margin: 0,
  textAlign: 'center',
  verticalAlign: 'middle',
  display:flex;
  align-items: center;
  justify-content: center;

}}>
  <span 
    className="glyphicon glyphicon-refresh"
    style={{
      fontSize: 50,
      animation: 'spin 1s infinite linear'
    }}
  />
</div>;

let detailPanel = <div className="well" style={{margin: 2, padding: 5}}>
  <div style={{position: 'relative'}}>
    {workingStatus && loadingOverlay}
    {detailForm}
  </div>
  ...
</div>;

centre overlay spinner on any element

/*------------------------------------*\    ##Loading\*------------------------------------*/

/* Absolute Center CSS Spinner */.u-loading {    z-index: 9999;}

.u-loading:not(:required):after {    width: 100%;    height: 100%;    z-index: 9999;    overflow: visible;    position: relative;    content: '';    display: inherit;    font-size: 10px;    width: 1em;    height: 1em;    margin: 0 auto;    -webkit-animation: spinner 1500ms infinite linear;    -moz-animation: spinner 1500ms infinite linear;    -ms-animation: spinner 1500ms infinite linear;    -o-animation: spinner 1500ms infinite linear;    animation: spinner 1500ms infinite linear;    border-radius: 0.5em;    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;}
/* Animation */
@-webkit-keyframes spinner {    0% {        -webkit-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100% {        -webkit-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@-moz-keyframes spinner {    0% {        -webkit-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100% {        -webkit-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@-o-keyframes spinner {    0% {        -webkit-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100% {        -webkit-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@keyframes spinner {    0% {        -webkit-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100% {        -webkit-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}
.u-border-all {    border: solid black 2px;}
.address-container {    height: 200px;    width: 200px;}

.u-loading:not(:required)::after {    animation: 1500ms linear 0s normal none infinite running spinner;    border-radius: 0.5em;    box-shadow: 1.5em 0 0 0 rgba(0, 0, 0, 0.75), 1.1em 1.1em 0 0 rgba(0, 0, 0, 0.75), 0 1.5em 0 0 rgba(0, 0, 0, 0.75), -1.1em 1.1em 0 0 rgba(0, 0, 0, 0.75), -1.5em 0 0 0 rgba(0, 0, 0, 0.75), -1.1em -1.1em 0 0 rgba(0, 0, 0, 0.75), 0 -1.5em 0 0 rgba(0, 0, 0, 0.75), 1.1em -1.1em 0 0 rgba(0, 0, 0, 0.75);    content: "";    display: inherit;    font-size: 10px;    left: 50%;    margin: 0 auto;    overflow: visible;    position: fixed;    top: 50%;    z-index: 9999;        transform: translate(-50%, -50%);}.u-loading{position:relative}
<div class="u-loading"><div class="address-container u-border-all">    <input type="text"  class="address__textbox address__textbox--line u-border-bottom">    <input type="text"  class="address__textbox address__textbox--house-no u-border-right">    <input type="text" class="address__textbox address__textbox--street">    <input type="text"  class="address__textbox address__textbox--line">    <input type="text" class="address__textbox address__textbox--line">    <input type="text" class="address__textbox address__textbox--line">    <input type="text"  class="address__textbox address__textbox--postcode u-border-right u-border-top">    <select class="address__textbox address__country u-border-top">        <option value="Select a country" selected="selected" class="rps-placeholder">Select a country</option>        <option value="England">England</option>        <option value="Wales">Wales</option>        <option value="Scotland">Scotland</option>    </select></div></div>

How to center loading image on overlay

You placed your position relative on the wrong element.

.overlay { 
     position: relative;
}

instead of 

.overlay-modal { 
     position: relative;
}

Spinner Overlay Bootstrap 4 Card Body Only - Flex Alignment

Change <div id="justify-content-center align-items-center"> to

<div class="w-100 d-flex justify-content-center align-items-center">

See it in action below:

function on() {
  document.getElementById("overlay").style.display = "flex";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}
.spinner {
  height: 60px;
  width: 60px;
  margin: auto;
  display: flex;
  position: absolute;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, .15);
  border-right: 6px solid rgba(0, 174, 239, .15);
  border-bottom: 6px solid rgba(0, 174, 239, .15);
  border-top: 6px solid rgba(0, 174, 239, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">

    <div class="card">
      <h5 class="card-header">Featured</h5>
      <div class="card-body justify-content-center align-items-center">
        <div id="overlay" onclick="off()">
          <div class="w-100 d-flex justify-content-center align-items-center">
            <div class="spinner"></div>
          </div>
        </div>
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <button type="button" class="btn btn-primary" onclick="on()">Turn on overlay effect</button>
      </div>
    </div>

  </div>
</div>

How to append a centered progress spinner on top of an overlay?

What you need to do is use the background property with the following attributes:

.css({
         'opacity' : 0.6,
         'filter' : 'alpha(opacity=60)',
         'position': 'absolute',
         'top': 0,
         'left': 0,
          'background': 'black url(path/to/image) no-repeat center center',   
         'width': '100%',
         'z-index': 5000
});

The arguments to that property are:

  • Background color
  • Path to the image
  • Whether to repeat, repeat-x, repeat-y or not repeat the background image
  • Left position
  • Top position

Alternatively, you could also use the full version:

.css({
         'opacity' : 0.6,
         'filter' : 'alpha(opacity=60)',
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'background-image': 'url(path/to/image)',
         'background-repeat': 'no-repeat',
         'background-position': 'center center',   
         'width': '100%',
         'z-index': 5000
});

DEMO

Overlay text centered in mat-progress-spinner on Angular, Material and Flex-Layout

You can use the following and it should do the trick:

.message {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hope this helps.


Related Topics

@Font-Face Ie9 Font-Weight Doesn't Work

How to Make The UI-Select More Bootstrap

Where Should I Use CSS Vendor Prefixes

Right Justifying Text

Input[Type=Select] Doesn't Work for Me

Copy Chrome Default Input's Outline Style

Sass "Error: Can't Find Stylesheet to Import."

Not Able to Do Max Width

What Version of Foundation Is Used in Cakephp3

Preventing Page Breaks in a Table When Printing

Filling Remaining Vertical Space

What's The Correct Way to Set a Base Rem Value in CSS

What Are Alternatives to The Span-Element

Browser Not Recognizing Max-Device-Width

Resize Font Depending on String Length

How Debug Placeholder Pseudo Element in Firefox

Strange Styling Through Injected Stylesheets in Chrome

Div with Double Arrow on Top and Bottom


Leave a reply



Submit