Progress bar layout using CSS and HTML
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%;
}
HTML:
<div id="progress">
<span id="percent">30%</span>
<div id="bar"></div>
</div>
CSS:
#progress {
width: 500px;
border: 1px solid black;
position: relative;
padding: 3px;
}
#percent {
position: absolute;
left: 50%;
}
#bar {
height: 20px;
background-color: green;
width: 30%;
}
Sample here: http://jsfiddle.net/WawPr/
.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/