simple labeled percentage bars in CSS

So at work the spec called for a percentage complete bar... one of my coworkers came up with something like the following (I reinvented the CSS, but the idea was his)

The css and HTML is a bit more fiddly than I like, but I've seen worse:

<style>
.percentage {
width:200px;
height:20px;
background-color:#CCCCCC;
text-align:center;
color:black;
position:relative;
font-family:tahoma,arial,sans-serif;
}
.percentage .bar{
position:absolute;
top:0px;
left:0px;
overflow:hidden;
width:100px;
}
.percentage .inner{
width:200px;
background-color:#000055;
color:white;
}
</style>

<div class="percentage">
<span class="val">50%</span>
<div class="bar">
<div class="inner"><span class="val">50%</span></div>
</div>
</div>


The basic idea is to have 3 nested divs. The outer div has a fixed width and the percentage, with a dark text color. The middle div is set to the desired visible width of the bar (multiplying the current percent value times the width of the outer bar, divided by 100) It has its overflow set to hidden, so that the final inner div (set to the full width of the outer bar) displays its darker shade, lighter text for only as far as it needs to-- then the duplicate text of the outermost div shows behind it. The innermost bar obviously doesn't have to be a set color, it can be a repeating background image or whatever.

I then added a demonstration of an animation technique. As far as I know, there's no easy way of knowing how far along a jQuery animation is (for updating the % text) so I used setTimeout with a function that incremented the value and then called itself (in something a bit like tail recursion) until finally the displayed value was the same as the goal value.

(Wrapping this as a jQuery object or applying it to a specific need is left as an exercise for the reader...)

So that was the UI side of things. On the UX side, I thought we had a problem. At work we are introducing a point-and-level system and were using the progress bar to to show the user's current level along with how the points total and how long until the next level. The display for that was something like this:

 Level 3 was achieved at 700 points, and at that point I had 850. Take a look and answer this question: about how many points do I need to be at Level 4? 




To me it looks like Level 4 is around 2500 or so -- the bar indicates that I'm only 1/3 of the way there. But that's not the case. Level 4 is 1200 points, and what the bar is showing me is that I'm about 1/3 of the way up from when I hit Level 3.

So, I found that counter-intuitive, and unlike how other point systems (like the unlock system in the game Just Cause 2) do things. Instead, I thought this display was more clear:

Here, it looks like I am most of the way to the next milestone, which is in fact the case.

An alternate display might be something like:

I think this does a clearer job than the first example of showing Level 3 as a baseline, and that Level 4 as what is being worked to.

The jury is still out on which display we'll use. It deserves some user testing, but I'm pretty sure either of the alternatives are a better form of data visualization than the original setup.