0

I am developing a CMS for clan websites. I have a table with member ranks that members can be promoted to based on the experience points that they earn. I would like to create a progress bar for that will display how far they have until they are promoted until the next rank. What I want to do is fill a black bar with green based on how much xp they have earned since they've been promoted. I have an equation that will find a percentage based on the member's progress. For example: if a member has made it 67% of the way from it's current rank to the next rank, 67% of the length of the black bar will be filled with green. I hope all of this makes sense. What do you think would be the best way to accomplish this?

4

2 回答 2

1 
<div style="background-color:black;overflow:hidden;width:100px;height:30px">
    <div style="float:left;background-color:green;width:67%;height:30px">
    </div>
</div>

Instead of background-color you can use background-image with width 100px(for both images) and height 30px or whatever you gonna use

于 2013-03-30T00:58:33.440 回答
0

Use simple CSS -- image generating here is not what you need. But even if you need, generate 100 images once for all possible ranks percent values and use them in your script.

于 2013-03-30T00:59:53.603 回答