Edit in JSFiddle

<div class="wrapper">
<div class="img"></div>
<div class="progress"></div>
<div class="human-progress">
  <div class="human"></div>
</div>
</div>

.wrapper {
  position:relative;
}
.img {
  height: 400px;
  background-image:url("https://landing.adobe.com/en/na/products/marketing-cloud/ctir-3108-running-on-experience/static/img/forest-path-front.84df3ed.png");
  background-size: cover;
  position: absolute;
  top:0px;
  width:100%;
  z-index:200;
}

.progress {
  background-color: yellow;
  height: 400px;
  width: 25%;
  position: absolute;
  top:0px;  
  z-index:100;
}

.human-progress {
  height: 400px;
  width: 25%;
  position: absolute;
  top:0px;  
  z-index:250;
}

.human {
background-image:url("https://i.pinimg.com/originals/c4/14/58/c414585495b61f57e22ea2fe2bfa3130.png");  
  background-size: cover; 
  height: 140px;
  width: 100px;
  position: absolute;
  top:50px;  
  right: 0; 
}
setInterval(function(){
  var progress = $('.progress').first();
  var humanProgress = $('.human-progress').first();
	var progressWidth = progress.width();
  progressWidth += 25;
  
  if (progressWidth > progress.parent().width()) {
  	progressWidth = 125;
  }
  progress.width(progressWidth);
	humanProgress.width(progressWidth);
 
}, 1000);