1

In an Angular project, I try to setup a loading overlay over a given div. I don't want to place this overlay over my entire page (would be easier I guess).

Here is a Fiddle of what I achieved to date (

#loader-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}

As you see, my div has a red border to clearly see it. My #loader-wrapper doesn't cover the whole div area.

I'd like it to be extended to the whole div and center the loader both vertically and horizontally.

I tried to place it on the top with no success.

As a bonus, if the loader size could be relative, it could avoid some problems in the future I guess if my div contains very little text... But I don't have any idea on how to achieve it.

BlackHoleGalaxy
  • 9,160
  • 17
  • 59
  • 103

3 Answers3

4

You need to set it to position: absolute; in order for the top and left to work. That will take it out of the context. The top and left and right and bottom properties of an absolutely positioned element are relative to it's closest element with position: relativeset. If there's no element with position: relative; it will go all the way up to the <body>.

I also changed the margin of your loader because it wasn't centered.

.container {
    position: relative;
}
#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
<div class="container">
  <div class="row">
    <div class="col-md-6" style="border: 1px solid red;">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit dolor.</p>

       <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla, eget maximus nisi molestie eget.</p>
        <div id="loader-wrapper">
          <div id="loader"></div>
        </div>
    </div>
  </div>
</div>
Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
  • Thanks all for such answers. Forgot about this simple rule. When in my script, i encounter a strange thing: here is the rendered blue "not-as-intended-circle": https://i.imgsafe.org/97d1d2288d.png – BlackHoleGalaxy Dec 08 '16 at 15:31
1

you need to add position:relative in parent (.col-md-6) and absolute in children #loader-wrapper

.col-md-6 {
  position: relative;
  border: red solid 1px;
}
#loader-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate
        eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit
        dolor.
      </p>

      <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla,
        eget maximus nisi molestie eget.</p>
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
0

there is an answer:

Add "position: relative" to the parent and "position: absolute" to the element.

.parent {
  position: relative;
}

#loader-wrapper {
   position: absolute;
}

https://jsfiddle.net/sh4k10rp/8/

Vadym
  • 1,067
  • 1
  • 13
  • 24