Progress bar

Progress bar using CSS, HTML, and jQuery

by mbratch

HTML

<div class='progress' id='back'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='front'>
    </div>
  </div>
</div>

CSS

.progress {
      display: block;
      margin: 0;
      /* Choose desired padding/height in coordination with font size */
      padding: 10px;
      height: 28px;
    }

    #back {
      position: relative;
      /* Choose a border to your liking, or none */
      border: 1px solid lightgray;
      /* Choose your desired text attributes */
      text-align: center;
      font-family: Calibri, "Sans Serif";
      font-size: 16pt;
      /* Set the desired width of the whole progress bar */
      width: 75%;
      background-color: white;
      color: black;
    }

    #front {
      position: absolute;
      left: 0;
      top: 0;
      background-color: navy;
      color: white;
    }

    #boundbox {
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
    }

JavaScript

$('#front').width($('#back').width())

percent_complete = 45
$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())