Как я могу добавить текст до и после контейнера, как показано на рисунке ниже.

 <div class="volume-container">  
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
</div>
  

Ниже приведена моя скрипка для того же.

http://codepen.io/anon/pen/cErwo

Использовать display:inline-block в div. Это позволяет div действовать как встроенный элемент, но позволяет вам устанавливать высоту элемента. Другим вариантом может быть использование float: left элементов уровня и блока.. но этот способ лучше:

http://codepen.io/anon/pen/hsFLi

HTML:

 <div class="volume-container">
  <span>Pre</span>
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
  <span>after</span>
</div>
  

CSS:

 .volume-container {
  width: 100%;
  margin: 0 auto;
}

.pb1 {
    width: 17.5%;    
    border: 1px solid;
    background: #dddddd;
  display:inline-block;
}

#progress-bar, #progress-bar2 {
    width: 0;
    height: 20px;
    line-height: 20px;
    background: #79a151;
    font-family: calibri;
    color: white;
    display:inline-block;
    text-align: center;
    overflow: hidden;
}
  

-ДЕМОНСТРАЦИЯ-

Вы можете просто использовать псевдоэлементы и атрибуты data- * .pb1 следующим образом:

HTML:

 <div class="volume-container">  
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
</div>
  

Сначала убедитесь, что .pb1 имеет position:relative и использовать content:attr(data-percentage)" Usage";

Css:

 .volume-container {
  width: 100%;
  margin: 0 auto;
}

.pb1 {
    margin-left:100px;
    width: 17.5%;    
    border: 1px solid;
    background: #dddddd;
    position:relative;
}
.pb1:before,.pb1:after{
  position:absolute;
  top:0;
}
.pb1:before{
  left:-100px;
  content:"analysis volume"
}
.pb1:after{
  content:attr(data-percentage)" Usage";
  right:-100px;
}
#progress-bar, #progress-bar2 {
    width: 0;
    height: 13px;
    line-height: 20px;
    background: #79a151;
    font-family: calibri;
    color: white;
    text-align: center;
    overflow: hidden;
}
  

затем установите $('.pb1').attr('data-percentage',width); значение .pb1

Js:

 var progressBar = $('#progress-bar'),
    width = 0;

progressBar.width(width);


var interval = setInterval(function() {
    width  = 1;
    $('.pb1').attr('data-percentage',width);
    progressBar.css('width', width   '%');
    document.getElementById("progress-bar").innerHTML = width;
    if (width >= 100) {
        clearInterval(interval);
    }
}, 100);