CODEWITHSUNDEEP
jqueryjquery-ui
ajay
ajay

Reputation: 1570

is it possible to make real time progress/percentage bar in jquery

Below code is simple jquery progress bar. Is there any way to update progress value (that is 67 rite now)dynamically on ajaxStart and reach this value to 100 on ajaxStop()? 

<head><script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />



    <script>
        $(function() {
            $( "#progressbar" ).progressbar({
                **value: 67**
            });
        });
    </script>
</head>


 <body>
    <div id="progressbar"></div>
</body>

Upvotes: 1

Views: 5516

Answers (1)

loxxy
loxxy

Reputation: 13151

If you are targetting HTML5 browsers only, then try whats decribed here:Jquery Ajax Progress in HTML5

The traditional way to go about this would be to show a spinning gif, instead of the loader.

Ajax request wont be too long in most of the cases & hence all the effort in trying for the same is lost.

However it is not uncommon for a progress bar to be shown. The problem is, older browsers did not share this info with JS & the developers were left to using hacks like,

  • Using the help of flash. Flash plugin could keep track of the amount of data uploaded & hence tell the javascript.

  • A method of approximating the time also works in certain cases.

  • The only choice that remains is to ping the server continuously to know how much transfer took place.

Upvotes: 2

Related Questions