jQuery: Stop the progress bar animation when it reaches 100%? : I'm trying to create a progress bar using jQuery and CSS.

At the moment, I have created the progress bar using CSS and I can animate it using jQuery.

However, I can't stop the progress bar (loading animation) from stopping when it reaches the `100%`.

to explain the issue, I have created this working FIDDLE:

https://jsfiddle.net/6jvr0ahg/

And this is my code:

    setInterval(function(){ 
      // place this within dom ready function
    
    if(currentProgress == '100'){
    
    alert('all downloaded');
    
    }else{
    
    var currentProgress = $(".progress-bar").width() / $('.progress-bar').parent().width() * 100;
    
    var setWidth = Number(currentProgress) + 25;
    
    
    if(currentProgress > 80){
    
    $('.progress-bar').css({
       'width' : ''+setWidth+'%',
       'background-color' : '#86e01e'
    });
    
    }else{
    
    
    $('.progress-bar').css({
       'width' : ''+setWidth+'%',
       'background-color' : '#f27011'
    });
    }
    
    
    }
    
    }, 3000);


If you run the fiddle above, you will see that the progress bar keeps going even when it passes the 100%.


Can someone please advice on this issue?

Any help would be appreciated.

Thanks in advance. 