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 th

Answer 1

.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%);
    }

    

    
50%

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