Progressbar increment while script is executing

Progressbar increment while script is executing

Hi everybody.
I have a piece of code that creates a simple table in a while loop. My
target is to increment a ui progressbar at every step of this loop.
Actually my progressbar goes from 0% to 100% at the end of the loop.
This is a piece of my code.
Thank you for your help!
Davide.
<html>
<head>
    <title>test2 - progressbar</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-
ui-1.7.2.custom.css" type="text/css" media="screen" title="no title"
charset="utf-8">
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $('#progressbar').css({ 'height':12, 'width': 500 }).progressbar
({ value: 0 });
            var count = 0;
            $('#but').click(function(){
                var str = "",
                    count = 0,
                    elements = 2000;
                for(var i=0; i<elements; i++) {
                    if((i%10) == 0) {
                        if(i == 0)
                            str += '<tbody><tr>';
                        else
                            str += '</tr><tr>';
                    }
                    str += '<td>' + i + '</td>';
                    var progressval = ( (++count) / elements ) * 100;
                    $('#progressbar').progressbar('value', progressval);
                    if(i == (elements-1))
                        str += '</tr></tbody>';
                }
                $('#tabella').append(str);
            });
        });
    </script>
</head>
<body>
    <div id="progressbar"></div>
    <input type="button" name="but" value="clicca" id="but"/>
    <table id="tabella" border="0" cellspacing="5" cellpadding="5"></
table>
</body>
</html>
--