[Suggestion] document loader with full-screen overlay

[derekphilipau]

beautiful loaders!

for people like me who suck at css it would be nice to have documentation of how to use the loaders with a full-screen overlay with adjustable overlay background opacity. i could only come up with the following code (opaque background), still can't figure out how to center the loader.

.load-container {
  position: fixed;
  display: block;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $loader-background-color;
}

.loader {
  z-index: 1001;
}

[day0ops]

@derekphilipau bit late to the party but I got it working with the following,

HTML,

<div class="transparent-background">
  <div class="loader-center">
    <div class="loader">Loading...</div>
  </div>
</div>

CSS,

.transparent-background {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

.loader-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}