Animation pixelisation? Or jQuery animation step smoothness

Question

css

I decided to attach a progress bar to my project, I did it simply.
**javascript**

function progress(time) {
  $('.bar-wrap').animate( {
    width:'100%'
  },time,'linear');
}
progress(30000);

The width of the bar in pixels is 250, I noticed that every second n number of pixels is added, not 1. So the question is how can I make it add one pixel? indicate

width:'250px'

it is impossible, the width of the bar is dynamic. The main task is actually to make an invisible process of progress. Different easyng-s don't help.

Answer 1

I think you need to write a custom animation type
anton.shevchuk.name/javascript/jquery-for-beginners-write-animation-plugins/

Answer 2

30000 is 30 seconds, it is logical that in one second there will be about 8-9 pixels per second. but in general it’s easier, if the speed is 1 pixel for one second, then make a second interval in which there will be an increase in progress, a check to stop the animation, etc.:

Answer 3

in jQuery, animation is done through requestAnimationFrame if possible, so that the animation step always matches the monitor's frame rate (unless there is some complex logic that slows everything down).
If rAF is not supported, the frequency is set using jQuery.fx.interval
Animations in jQuery are almost always as smooth as possible, if something twitches, you need to watch the main code stream, most likely the logic works out quite hard there.