<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<div vhcenter class="all"> 
  
  <svg class="starbar" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="960px" height="300px" viewBox="0 0 960 300" enable-background="new 0 0 960 300" xml:space="preserve">
<path fill="#231F20" stroke="#231F20" stroke-width="5" stroke-miterlimit="10" d="M930.8,70.1H29.2C17.5,70.1,8,79.5,8,91.2v117.6c0,11.7,9.5,21.2,21.2,21.2h901.7c11.7,0,21.2-9.5,21.2-21.2V91.2C952,79.5,942.5,70.1,930.8,70.1z M156.2,216.8L112.9,194
	l-43.4,22.8l8.3-48.3l-35.1-34.2l48.5-7l21.7-44l21.7,44l48.5,7.1L148,168.5L156.2,216.8z M337.9,216.8L294.5,194l-43.4,22.8
	l8.3-48.3l-35.1-34.2l48.5-7l21.7-44l21.7,44l48.5,7.1l-35.1,34.2L337.9,216.8z M519.5,216.8L476.1,194l-43.4,22.8l8.3-48.3
	l-35.1-34.2l48.5-7l21.7-44l21.7,44l48.5,7.1l-35.1,34.2L519.5,216.8z M704.1,216.8L660.7,194l-43.4,22.8l8.3-48.3l-35.1-34.2
	l48.5-7l21.7-44l21.7,44l48.5,7.1l-35.1,34.2L704.1,216.8z M890.5,216.8L847.1,194l-43.4,22.8l8.3-48.3l-35.1-34.2l48.5-7l21.7-44
	l21.7,44l48.5,7.1l-35.1,34.2L890.5,216.8z"/>
  </svg>
  
  <div class="indicator"></div>
  
  <div class="button-holder">
    <div class="button-1 button">1</div>
    <div class="button-2 button">2</div>
    <div class="button-3 button">3</div>
    <div class="button-4 button">4</div>
    <div class="button-5 button">5</div>
  </div>
    
<div>

*[vhcenter] {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
}

.all {
  margin-top: -50px;
}

.starbar {
  height: 120px; 
}

.indicator {
  height: 55px;
  width: 1px;
  background-color: #00ccff;
  margin-left: 300px;
  margin-top: -90px;
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;

}

.button-holder {
  margin-left: 355px;
}

.button {
  transition: 0.4s ease;
  margin-top: 10px;
  display: inline-block;
  height: 25px;
  width: 40px;
  background-color: #00ccff;
  text-align: center;
  padding-top: 6px;
  padding-bottom: -2px;
  border-radius: 7px;
  font-family: 'Roboto', sans-serif;
  margin-left: 5px;
}

.button-1:hover {
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;
  padding-top: 10px;
  cursor:pointer;
}

.button-2:hover {
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;
  padding-top: 10px;
  cursor:pointer;
}

.button-3:hover {
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;
  padding-top: 10px;
  cursor:pointer;
}

.button-4:hover {
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;
  padding-top: 10px;
  cursor:pointer;
}

.button-5:hover {
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  transition-property: all;
  transition-duration: .5s;
  padding-top: 10px;
  cursor:pointer;
}

$(document).ready(function() {
  
  $(".button-1").click(function() {
    $(".indicator").css("width", "75px");
  });
  
  $(".button-2").click(function() {
    $(".indicator").css("width", "150px");
  });
  
  $(".button-3").click(function() {
    $(".indicator").css("width", "220px");
  });
  
  $(".button-4").click(function() {
    $(".indicator").css("width", "290px");
  });
  
  $(".button-5").click(function() {
    $(".indicator").css("width", "360px");
  });
  
});