In this article I will explain with an example, how to redirect to a URL after certain delay after the jQuery ProgressBar is 100% complete.
 
 

HTML Markup

The HTML Markup consists of an HTML DIV.
<div id="progressbar"></div>
 
 

jQuery ProgressBar implementation

Inside the HTML Markup, first the following CSS file is inherited.
1. jquery-ui.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the HTML DIV has been applied with the jQuery progressbar plugin with following properties.

value – The initial value of the jQuery ProgressBar

max – The max value of the jQuery ProgressBar

Then using the JavaScript setInterval function, the value of the ProgressBar is incremented and when the value reaches 100, the JavaScript Interval is cleared and the user is redirected to the desired URL.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function () {
        var increment = 10;
 
        $("#progressbar").progressbar({
            value: 0,
            max: 100
        });
 
        var progressInterval = setInterval(function () {
            increment += increment;
 
            if (increment <= 100) {
                $("#progressbar").progressbar("option", "value", increment);
             } else {
                clearInterval(progressInterval);
                window.location = 'https://www.aspsnippets.com'
            }
        }, 1000);
    });
</script>
 
 

Screenshot

jQuery: Redirect to URL after delay using ProgressBar
 
 

Downloads

Download Code