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

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 2

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/

Answer 3

Just change the onclick function as follows and you will have an animated version of the accepted solution

$('.changeprogress').click(function() {
  var width = 1;
  var percent = $(this).text().replace('%','') ;
  var id = setInterval(frame, 25);

  function frame() {
    if (width >= percent) {
      clearInterval(id);
    } else {
      width++;
      $('.bar').css('width', width + '%');
      $('.percent').text(width + '%');
    }
  }

});

http://jsfiddle.net/Zfzva/418/ can see it here.

thanks to

https://stackoverflow.com/a/5865894/2815227

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3