Negative text progress bar tutorial

Design, UI

A very good friend of mine (the founder of CheckErr, an unprecedented site analyzer tool) suggested I improve my progress bar design by making its text change color pixel by pixel as the progress bar passes through. The idea is to have two identical divs on top of each other with different text and background color and slowly extending the top one over the other. I have not yet seen such a progress bar anywhere on the internet, it might even start a revolution! :O

Uploading: wc3l_replay_pack.zip

HTML:

<div class="progress-container">
	<!-- span element is needed to fill the padding (without it, that padding would be background colored) -->
	<div class="progress-bar positive"><span></span>Uploading file: awesome_replay_from_golden_age.w3g</div>
	<!-- javascript is going to fill the second element with the same text but with whitespace converted to non-breaking spaces -->
	<div class="progress-bar negative"></div>
</div>

LESS css:

.progress-container {
	display:inline-block;
	margin:40px auto;
	position:relative;
	border:1px solid rgba(0,0,0,0.25);
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	.progress-bar {
		margin:0;
		height:36px;
		line-height:36px;
		text-align:left;
		text-overflow:clip;
		overflow:hidden;
		z-index:0;
		&.negative {
			padding-left:50px;
			margin-right:50px;
			width:100%;
			background:#fff;
			color:#000;
			z-index:1;
		}
		&.positive {
			width:0;
			position:absolute;
			background:#2ba0c5;
			color:#fff;
			z-index:10;
			span {
				padding-left:50px; /* need this span to fill in the left padding, otherwise it would be background colored */
			}
		}
	}
}

[animating the width just for the sake of presentation]

$(function() {
	var 
		width = 0,
		$barPositive = $('.positive'),
		$progressTexts = $('.progress-bar'),
		baseText = $progressTexts.eq(0).html();

	// replace spaces of the inner nodes with non-breaking spaces
	$progressTexts.each(function() {
		$(this).html(baseText.replace(/\s/g, '&nbsp;'));
	});
	
	// just for presentation
	function increaseWidth() {
		if (width > '100') {
			width = 0;
		}
		$barPositive.eq(0).css('width', width + '%');
		width += 0.25;
		setTimeout(increaseWidth, 50);
	}	
	
	increaseWidth();
});

I did this for a file sharing app I'm working on. I'm only scratching the surface of the HTML5 File API, but it has some great tools to implement a fully functional upload progress bar like this one. Here is a great tutorial from SitePoint, in case you wish to read more.

HTML, LESS, javascript

Contact