Flexbox Center of Center

by Dion Goncalves

HTML

<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et ultricies risus. Sed pulvinar leo non ligula luctus aliquet.</h3>
  </div>
</div>

CSS

/* FRONT PAGE LOADER */

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  
}

.centered {
  align-self: center;
}

.center-center {
  align-self: center;
}

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/*SPIN THE LOGO */
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

<!-- $(window).load(function () {
"use strict";

function loadingScreen() {
  $(".loader").fadeOut(2000);
}
(function() {
var counter = 3,
  h2 = document.getElementById("blank1"),
  spinningLogo = document.getElementById("blank2"),
  loadingText = document.getElementById("blank3");
setInterval(function() {
  counter -= 1;
  if (counter === 0) {
    clearInterval(counter);
    h2.innerHTML = "";
    spinningLogo.innerHTML = "";
    loadingText.innerHTML = "";
    loadingScreen();
  }
}, 1000);
}());
}); -->