Progress Bar / Profile Completeness Meter with the Text Cut in Two Colors

What are we Creating today ?

This is one of the first innovations. This dates back to around January 2011. At that time, when I was able to code this, it looked so cool to me. Lets get to it:
We are going to create a cool Progress Bar ( or in specific case, we say – Profile completeness meter ) in which the color of text also changes as the bar fills up. You see how the text is cut in between. And when it animates, the effect looks so Good !!

Profile is 58% CompleteProfile is 58% Complete

So What’s the Trick

We have the full text in two colors in two different containers. With higher z-index the yellow box containing the black text is positioned on top of green box containing the white text. The text is center aligned in both of them so that they render at exactly same point. This kills cross browser worries too. Now the black text in yellow box is inside another span whose width is made equal to green box and the yellow box is made overflow hidden.
Now when yellow box fills up, only some part of black text becomes visible and rest is cut off by overflow hidden and the yellow box overlaps/hides the white text till that extent. So the two texts seem to join at that edge  🙂
Here is the full code and some variations of this progress bar:

/* CSS */
.simple-bar {
	background-color: #A0D468;
	border-bottom: 3px solid #F6BB42;
	font-size: 90%;
	height:30px;
	line-height: 2;
	margin:0 auto 1em;
	position: relative;
	text-align: center;
	width: 470px;
}
.text {
	color: white;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
}
.fill {
	background-color: #FFCE54;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 10;
}
.fill > span {
	color: black;
	display: block;
	width: 470px;
}
<!-- HTML -->
<div class="simple-bar">
	<span class="text">Profile is 20% Complete</span>
	<span class="fill" style="width: 20%">
		<span>Profile is 20% Complete</span>
	</span>
</div>
<div class="simple-bar">
	<span class="text">Profile is 40% Complete</span>
	<span class="fill" style="width: 40%">
		<span>Profile is 40% Complete</span>
	</span>
</div>
<div class="simple-bar">
	<span class="text">Profile is 80% Complete</span>
	<span class="fill" style="width: 80%">
		<span>Profile is 80% Complete</span>
	</span>
</div>
<div class="simple-bar">
	<span class="text">Profile is 58% Complete</span>
	<span class="fill" style="width: 58%">
		<span>Profile is 58% Complete</span>
	</span>
</div>
Profile is 20% CompleteProfile is 20% Complete
Profile is 40% CompleteProfile is 40% Complete
Profile is 80% CompleteProfile is 80% Complete
Profile is 58% CompleteProfile is 58% Complete

Leave a Reply

  • (will not be published)