Changing the width of a centered progress bar
You may put your text "Boost" in a seperate element and position it.
Check this:



var inner = document.querySelector(".inner");
var cb = function() {
  var k = 1 - Date.now() % 1500 / 1500;
  inner.style.width = (k * 100).toFixed(2) + "%";
  window.requestAnimationFrame(cb);
};
cb();
.boost {
  border: 2px solid #999;
  width: 300px;
  position: relative;
  font: 16px mono;
}

.boost .inner {
  margin: 0 auto;
  background-color: #999;
}

.boost .text {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
}
&lt;div class="boost"&gt;
  &lt;div class="inner"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="text"&gt;BOOST&lt;/div&gt;
&lt;/div&gt;




Note how position: absolute; behaves inside position: relative;.



After all I suggest you to drop this part and code it with canvas. Even CSS animations will outperform requestAnimationFrame.

Example with CSS animations:


var inner = document.querySelector(".inner");
inner.addEventListener("animationend", function () {
  // Animation just ended
  inner.parentNode.style = 'display:none;';
})
inner.style.animationDuration = '2s';
inner.style.animationName = 'boost';
.boost {
  border: 2px solid #999;
  width: 300px;
  position: relative;
  font: 16px mono;
}

.boost .inner {
  margin: 0 auto;
  background-color: #999;
  animation-timing-function: linear;
}

.boost .text {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
}

@keyframes boost {
  0% { width: 100%; }
  100% { width: 0; }
}
&lt;div class="boost"&gt;
  &lt;div class="inner"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="text"&gt;BOOST&lt;/div&gt;
&lt;/div&gt;