gif.html

<div class="progressitem gifsolution">
</div>

nested1.html

<div class="progressitem nested">
  <div class="progress" style="width: 70%"></div>
</div>

style1.css

.progressitem {
  width: 150px;
  height: 30px;
  background-color: #eee;
  border: 4px solid black;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;  
}

.nested {
  overflow: hidden;
}

.nested .progress {
  background-color: #ff0000;
  height: 100%;
  width: 0%;
}

style2.css

.progressitem {
  width: 150px;
  height: 30px;
  background-color: #eee;
  border: 4px solid black;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;  
}

.gifsolution {
  background-image: url(red_pixel.gif);
  background-position: -1px 0;
  background-repeat: repeat-y;
  background-size: 0%;
  overflow: hidden;
}

style3.css

.gifsolution {
  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
  background-position: -1px 0;
  background-repeat: repeat-y;
  background-size: 0%;
  overflow: hidden;
}