A Pen by Trisha Salas.

index.html

<div id="progress-container">
  <div class="progress-bar positive">
    <span></span>
    Upload in process . . .
  </div>
	<div class="progress-bar negative"></div>
</div>

Negative-text-progress-bar.markdown

Negative text progress bar

A Pen by Trisha Salas on CodePen.

License.

script.js

var width = 0;
var progressBar = document.getElementsByClassName('positive');

// replace whitespace characters with non-breaking spaces, this way the text will stay on one line
(function replaceWhiteSpace() {
  var textNodes = document.getElementsByClassName('progress-bar');
  // replace text and add new text node to '.negative'
  for (var i = 0; i < textNodes.length; i++) {
    // /\s/g matches any whitespace character
    textNodes[i].innerHTML = textNodes[0].innerHTML.replace(/\s/g, '&nbsp;');
  }
})();

// just for presentation
function increaseWidth() {
  if (width > '100') {
    width = 0;
  }
  progressBar[0].style.width = width + '%';
  width += 0.25;
}

setInterval(increaseWidth, 50);

style.css

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

body {
  font-family:helvetica;
}

#progress-container {
	margin:40px auto;
	position:relative;
	border:#999;
	width:30%;
	text-align:left;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
}
	
	.progress-bar {
		padding-left:10px;
		margin:0;
		height:36px;
		line-height:36px;
		z-index:0;
		text-overflow:clip;
	}
	
		.progress-bar.negative {
			position:relative;
			width:100%;
			background:#eee;
			color:#222;
			z-index:1;
			overflow:hidden;
		}
		
		.progress-bar.positive {
		  position:absolute;
			padding:0;
			width:0;
			background:#0074a2;
			color:#fff;
			z-index:10;
			overflow:hidden;
		}
			/* need this span to fill in the left padding, otherwise it would be background colored */
			.progress-bar.positive span {
				padding-left:10px;
			}