.wrapper{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2;background-color:#F5F5F5;background-image:linear-gradient(to left bottom, #EEE 52%, #FFF 72%, #EEE 100%)}
.wrapper {
  background-color: white;z-index: 10000;
}

.loader {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 55px;
  margin: 2em auto;
  background: #F1F2F3;
}
.load-pct {
  text-align: center;
  line-height: 55px;
  font-weight: bold;
  color: #2699BF;
  text-shadow: 1px 1px 1px #fff;
}
.load-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  /* The opposite color of my visible blue one*/
  background: #CB5934;
  animation: loading 7s infinite;
  mix-blend-mode: difference;
}



/* Big loader text */
.loader-text {
  height: 100%;
  width: 100%;
  display: inline-block;
  background: #FFF;
}
.loader-text .load-pct {
  font-size: 20vw;
  letter-spacing: 0;
  font-family: impact;
  text-transform: uppercase;
  line-height: 1.4;
}
.loader-text .load-bar {
  mix-blend-mode: lighten;
}

.wrapper p {text-align: center;
  color: #fda111;
  font-size: 2em;
  margin: .67em 0;
  margin-top: 0.67em;
  font-weight: bold;
}
.wrapper h2 {text-align: center;
  margin-bottom: 3em;
  color: #fda111;
}

@keyframes loading {
  0% {
    right: 100%;
  }
  75%, 100% {
    right: 0;
  }
}