<h1>IE9+ Accessible Reverse Text Colour Loader</h1>

<div class="loader" aria-description="loading" data-loaded="0%">
  <div class="bar" aria-hidden="true"></div>
</div>

$color: rgb(255,0,0);

.loader {
  font-size: 3em;
  line-height: 2em;
  position: relative;
  border: 1px solid red;
  color: $color;
  width: 5em;
  height: 2em;
  margin: 20vh auto;
  
  &:before {
    position: absolute;
    z-index: -1;
  }
  
  .bar:before,
  &:before {
    content: attr(data-loaded);
    display: block;
    text-align: center;
    overflow: hidden;
    width: 5em;
  }
  
  .bar {
    width: 0;
    background: $color;
    overflow: hidden;
    color: white;
    transition: 0.25s width;
    
    &.reset {
      transition: none;
    }
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
  text-align: center;
}

/**
 JS code below isn't required, just demos the load data 
*/
var $loader = document.querySelector(".loader"),
    $bar = document.querySelector(".bar"),
    reset, timout, i = progress = 0;

function loader () {
  clearTimeout(timout);
  
  // convert to percentage (+50% buffer)
  var p = Math.min(100, (++i % 150))|0;
  
  // set data attribute
  $bar.style.width = p + "%";
  $loader.setAttribute('data-loaded', p + "%");
  $bar.setAttribute('data-loaded', p + "%");
  
  // don't animate back
  if ( p < progress && !reset ) {
    $bar.className += " reset";
    reset = true;
  } else if ( reset ) {
    $bar.className = $bar.className.replace("reset", '');
    reset = false;
  }
  
  // set progress
  progress = p;
  
  // request next frame
  timeout = setTimeout(loader, 50);
}

loader();