Progress bar layout using CSS and HTML

Question

I am trying to achieve UI as shown in the image. However I am having little hard time after trying combinations of positioning now I am clueless. Can someone help me with this?

<style>
    .progress{
        position:relative;
        width:500px;
    }
    .bar{

    }
    .percent{

    }
</style>
<div class="progress">
    <span class="bar" width="%"></span>
    <span class="percent">50%</span>
</div>

Answer 1

i had the same problem and developed this:

http://jsfiddle.net/DgXM6/2/

HTML:

<div class="noload">
     <span class="loadtext">40%</span>
    <div class="load"></div>
</div>

CSS:

.load{    
width: 50%;
height: 12px;
background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
-moz-border-radius: 4px;
border-radius: 4px;
}

.noload{
width: 100px;    
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=); 

-moz-border-radius: 4px;
border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
font-size: 11px;
    color: #000000;
     position: absolute;
    bottom: -1px;

 left: 45%;       
}

Answer 2

In the following sample I added to non breaking spaces to achieve that the browser gives your box a dimension. Without that it would assume it empty and thus not applying the correct width and height.

You also might want to give the boxes a position:absolute, for putting them on top of each other. You also should use the style attribute instead of the width attribute since there is no width attribute for divs.

<style>
    .progress{
        border: 1px solid black;
        position:relative;
        width:500px;
    }
    .bar{
        background-color: #00ff00;
        position:absolute;
    }
    .percent{
        position:absolute;
        left:200px;
    }
</style>
<div class="progress">
    <div class="bar" style="width:50%">&nbsp;</div>
    <div class="percent">50%</div>
    &nbsp;
</div>

Answer 3

.progress{
        position:relative;
        width:500px;
        border:1px solid #333;
        position:relative;
        padding:3px;
    }
    .bar{
        background-color:#00ff00;
        width:50%;
        height:20px;
        transition:width 150ms;
    }
    .percent{
        position:absolute;
        display:inline-block;
        top:3px;
        left:50%;
        transform:translateX(-50%);
    }

<div class="progress">
    <div class="bar"></div >
    <div class="percent">50%</div >
</div>

interactive demo at http://jsfiddle.net/gaby/Zfzva/