There is the following code

$(document).ready(function() { setInterval(function() { if ($('.value').width() < 95) { $('.value').width($('.value').width() + 5 + '%'); } }, 1000); }); 
 .bar { width: 350px; height: 50px; background: #ccc; } .value { width: 0; height: 50px; background: #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bar"> <div class="value"></div> </div>

It is necessary that the width each time be increased by 5%, but it increases unevenly. Tell me how can I fix it?

    1 answer 1

     $(document).ready(function() { setInterval(function() { let width = parseInt($('.value')[0].style.width || '0%') if(width < 95) $('.value').width(5+width + '%') }, 1000); }); 
     .bar { width: 350px; height: 50px; background: #ccc; } .value { width: 0; height: 50px; background: #f00; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bar"> <div class="value"></div> </div>