<h1>Automatic reverse color</h1>
<h2>using mix-blend-mode</h2>

<div class="loader">
  <div class="load-pct">Loading…</div>
  <div class="load-bar"></div>
</div>


<div class="loader loader-text">
  <div class="load-pct">Loading…</div>
  <div class="load-bar"></div>
</div>

.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: auto;
  width: auto;
  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;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: .05em;
  word-spacing: .05em;
  text-align: center;
}
h1 {
  margin-top: 1.5em;
  color: #2699BF;
}
h2 {
  margin-bottom: 3em;
  color: #666;
}

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