When using the continuous bar you add a random value to the current percentage within each interval call
const random = randomInt(10, 20)
After that you check if the current percentage plus the random value is below 90.
if (localProgress + random < 90) {
If below 90 you set the new progress value, otherwise nothing happens. This means if you have a percentage of 80+ nothing will happen because any random value will be at least 10 and therefor too high.
I would suggest a different approach for the random value
const random = randomInt(Math.min(10, (100-localProgress)/5), Math.min(20, (100-localProgress)/3));
This would keep the random lower value at 10 until 50% and the upper value at 20 until 40%. After the the random values will be chosen between 1/5 and 1/3 of the remaining percentage, meaning you decrease those values constantly as the bar gets wider. Additionally you should change the condition above to lower as 100 instead of 90.
This would slow down the loading bar as it gets closer and closer to 100% but at least if won't get stuck.
Another thing I'd consider would be changing the randomInt function to a random float function in that case. Since CSS is perfectly fine with fraction width values and it would give the bar more possible width values.
When using the continuous bar you add a random value to the current percentage within each interval call
const random = randomInt(10, 20)After that you check if the current percentage plus the random value is below 90.if (localProgress + random < 90) {If below 90 you set the new progress value, otherwise nothing happens. This means if you have a percentage of 80+ nothing will happen because any random value will be at least 10 and therefor too high.
I would suggest a different approach for the random value
const random = randomInt(Math.min(10, (100-localProgress)/5), Math.min(20, (100-localProgress)/3));This would keep the random lower value at 10 until 50% and the upper value at 20 until 40%. After the the random values will be chosen between 1/5 and 1/3 of the remaining percentage, meaning you decrease those values constantly as the bar gets wider. Additionally you should change the condition above to lower as 100 instead of 90.
This would slow down the loading bar as it gets closer and closer to 100% but at least if won't get stuck.
Another thing I'd consider would be changing the randomInt function to a random float function in that case. Since CSS is perfectly fine with fraction width values and it would give the bar more possible width values.