For a web application meant for mobile browsers, I want to integrate [this](https://codepen.io/zerospree/pen/aCjAz?page=8) simple yet elegant preloader. It's going to reside on top of a translucent overlay. It's also going to have some words on top of it (e.g. "Please wait...", or "Hold on a minute..." etc).

I tried integrating all that. The result is below (run the snippet). It has 3 distinct problems (can you help me solve them all): 

1) I haven't been able to position the preloader + it's text on top of the translucent overlay (although I've used a high `z-index`). 

2) Moreover, the preloader graphic is getting skewed in accordance with the length of the sentence on top of it. I want it to be independent of that.

3) Lastly, they're not positioned in the exact middle (vertically speaking).

```css
body{background:#ECF0F1}

.parent{
  position:fixed;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.caption{
  margin-bottom:1em;
  color:gray;
  position:relative;
  z-index:10;
}

.load{
  width:50px;
  height:50px;
  position:relative;
  z-index:10;

}
.load hr{border:0;margin:0;width:40%;height:40%;position:fixed;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

.overlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.6;
  z-index:100;
  background-color:#FFFFFF;
}

body {

   background: #E8F5E9;
   background: repeating-linear-gradient(
  to right,
 #FAFAFA,
  #FAFAFA 50px,
  #E8F5E9 50px,
  #E8F5E9 100px
);
 }
```

```html
<body>
  <div class="overlay">
    <div class="parent">
      <div class="caption">Lorem ipsum dolor sit amet ...</div>
      <div class="load">
        <hr><hr><hr><hr>
      </div>
    </div>
  </div>
<body>
```

*Note: I'm hoping for pure CSS solutions, no JS involvement. I'd also want to avoid `flex-box`, and go for something universal (in a backward compatibility sense). E.g. `flex-box` support dwindles in older versions of Android browser (according to caniuse.com). I want to respect those versions too, hence it's best to stick to well-supported CSS 2.1 properties.*