Специфичный прогресс бар

// Для демонстрации 
$('.btn').on('click', function() { 
  var fill = $('.bar_fill'); 
  var size = parseInt($(this).attr('data-fill')); 
  fill.css('width', size + '%'); 
});

* { 
  box-sizing: border-box; 
} 
 
.bar { 
  width: 100%; 
  height: 50px; 
  padding: 10px; 
  background: #000; 
  position: relative; 
} 
 
.bar_scale { 
  height: 30px; 
  background: #8ea1b3; 
  position: relative; 
} 
 
.bar_fill { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  height: 30px; 
  background: rgb(110, 175, 253); 
  background: -moz-linear-gradient(left, rgba(110, 175, 253, 1) 0%, rgba(56, 100, 247, 1) 100%); 
  background: -webkit-linear-gradient(left, rgba(110, 175, 253, 1) 0%, rgba(56, 100, 247, 1) 100%); 
  background: linear-gradient(to right, rgba(110, 175, 253, 1) 0%, rgba(56, 100, 247, 1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6eaffd', endColorstr='#3864f7', GradientType=1); 
  transition: all 0.4s linear; 
} 
 
.bar_overlay { 
  position: absolute; 
  z-index: 1; 
  width: 100%; 
  height: 100%; 
  left: 0px; 
  top: 0px; 
  background-image: -webkit-linear-gradient(left, transparent 10px, rgba(0, 0, 0, 1) 10px); 
  background-image: -o-linear-gradient(left, transparent 10px, rgba(0, 0, 0, 1) 10px); 
  background-image: linear-gradient(90deg, transparent 10px, rgba(0, 0, 0, 1) 10px); 
  background-size: 16px 30px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="bar"> 
  <div class="bar_scale"> 
    <div class="bar_fill" style="width:60%;"></div> 
    <div class="bar_overlay"></div> 
  </div> 
</div> 
<br /> 
<button class="btn" data-fill="0">0%</button> 
<button class="btn" data-fill="25">25%</button> 
<button class="btn" data-fill="50">50%</button> 
<button class="btn" data-fill="75">75%</button> 
<button class="btn" data-fill="100">100%</button>