Question

I am trying to implement a preloaded using CSS but im having trouble with the positioning of the CSS loader relative to the background overlay. I would like the overlay to cover 100% of the body with a set opacity, and the loader to sit in front of the overlay with no opacity value applied. What I am actually getting is both the overlay and the loader are showing with a reduced opacity. I have tried setting the z-index but this does not seem to make any difference to the position of the loader. Anyone have any idea what the problem might be?

Thanks..

HTML uses Bootstrap framework.

<div class="container-fluid">
<div id=overlay>
    <div class="row">
        <div class="col-md-12" id="spinner">

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                      <div class="rect1"></div>
                      <div class="rect2"></div>
                      <div class="rect3"></div>
                      <div class="rect4"></div>
                      <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>

        </div>
    </div>
    </div>
</div>

CSS - #spinner setting the position of the loader. #overlay sets a 100% screen overlay with reduced opacity and z-index: -1;.

#spinner{
    position: relative;
    z-index:999; 
}

#overlay {
    opacity:0.1; 
    height: 100%;
    width: 100%;
    position:fixed;
    z-index: -1;
    left:0;
    top:0;  
}

Spinner CSS: CSS that builds loader.

.spinner2 {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner2 > div {
  background-color: #004a88;
  height: 100%;
  width: 6px;
  display: inline-block;


  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner2 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

Answer 1

The problem here appears to be that the spinners are inheriting the opacity from the #overlay - is there any reason that the spinners need to be a descendant?

I've changed your HTML to:

<div class="container-fluid">

    <div id=overlay>
    </div>

    <div class="row">
        <div class="col-md-12" id="spinner">
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </div>

</div>

Which seems to fix it - jsfiddle here.

CSS Loader and Overlay Positioning: z-index Not Working

1 个答案: