How to show progress bar while loading, using ajax

Question

I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve the data from the database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven't liked any. Can anybody provides some helpful guidance for me?

My ajax code:

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

        $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
            data:"title="+clientid,
            success:function(data){
             $("#result").html(data);
            }
        });

    });
});
</script>

You can't use a progress bar since the database query doesn't return anything until it's finished. You could have a simple loading animation though. — Ben Fortune
– Ben Fortune, Commented Nov 20, 2013 at 11:46
You can show/hide a div containing the animation with the ajaxstart and ajaxstop events. — Ben Fortune
– Ben Fortune, Commented Nov 20, 2013 at 11:50
Do you have a timeout for the AJAX request - or a rough idea of how long the request can be long at most? — MarcoL
– MarcoL, Commented Nov 20, 2013 at 12:10

Sean H · Accepted Answer · 2020-12-23 09:39:11Z

82

This link describes how you can add a progress event listener to the xhr object using jquery.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
                console.log(percentComplete);
            }
       }, false);
       
       // Download progress
       xhr.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               // Do something with download progress
               console.log(percentComplete);
           }
       }, false);
       
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});

edited Dec 23, 2020 at 9:39

Sean H

1,0761 gold badge16 silver badges34 bronze badges

answered Nov 20, 2013 at 11:50

Prateek

6,9852 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Bill Garrison Over a year ago

This no longer works with jQuery 1.9.3+. It goes into the event listener once at 1 percent complete and never hits it again. Any ideas?

Nelssen Over a year ago

You can try a loader with a timeout using jquery. set the timer on ajaxstart and stop on ajaxStop

RN Kushwaha Over a year ago

Its not working. What is upload here in xhr.upload.addEventListener?

Vishal Over a year ago

This worked for me after multiplying percentComplete with 100. thanks for the solution.

Arad Over a year ago

var percentComplete = evt.loaded / evt.total; is actually: var percentComplete = (evt.loaded / evt.total) * 100;

|

Suvash sarker · Accepted Answer · 2013-11-20 11:55:25Z

23

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
     //show the loading div here
    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $("#result").html(data);
          //hide the loading div here
        }
    }); 
    });
});
</script>

Or you can also do this:

$(document).ajaxStart(function() {
        // show loader on start
        $("#loader").css("display","block");
    }).ajaxSuccess(function() {
        // hide loader on success
        $("#loader").css("display","none");
    });

edited Nov 20, 2013 at 11:55

answered Nov 20, 2013 at 11:48

Suvash sarker

3,1451 gold badge21 silver badges23 bronze badges

3 Comments

prime Over a year ago

what if there are other ajax request running on the same page ? how can we do this to a specific ajax request.

Mark Carpenter Jr Over a year ago

@prime, assign it to a variable.

santoshe61 Over a year ago

@Suvash he asked for progress bar which shows the realtime completion progress of request, not the loader which have you answered.

Anish · Accepted Answer · 2013-11-20 11:53:30Z

20

Basically you need to have loading image Download free one from here http://www.ajaxload.info/

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
      $('#loadingmessage').show();

    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $('#loadingmessage').hide();
             $("#result").html(data);
        }
    }); 
    });
});

On html body

<div id='loadingmessage' style='display:none'>
       <img src='img/ajax-loader.gif'/>
</div>

Probably this could help you

answered Nov 20, 2013 at 11:53

Anish

5,4387 gold badges39 silver badges61 bronze badges

2 Comments

Sai Over a year ago

+1 Very simple and straight for Ajax request. Worked for me. Not used the download image option as I'm using progress control for universal apps.

Stop War Over a year ago

Simple. No hassle, one line solution.

Rohit Dodiya · Accepted Answer · 2016-02-15 09:38:18Z

7

$(document).ready(function () { 
 $(document).ajaxStart(function () {
        $('#wait').show();
    });
    $(document).ajaxStop(function () {
        $('#wait').hide();
    });
    $(document).ajaxError(function () {
        $('#wait').hide();
    });   
});

<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
            <img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>

answered Feb 15, 2016 at 9:38

Rohit Dodiya

2914 silver badges4 bronze badges

Comments

chuck · Accepted Answer · 2014-11-24 17:24:35Z

Here is an example that's working for me with MVC and Javascript in the Razor. The first function calls an action via ajax on my controller and passes two parameters.

        function redirectToAction(var1, var2)
        {
            try{

                var url = '../actionnameinsamecontroller/' + routeId;

                $.ajax({
                    type: "GET",
                    url: url,
                    data: { param1: var1, param2: var2 },
                    dataType: 'html',
                    success: function(){
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(error);
                    }
                });

            }
            catch(err)
            {
                alert(err.message);
            }
        }

Use the ajaxStart to start your progress bar code.

           $(document).ajaxStart(function(){
            try
            {
                // showing a modal
                $("#progressDialog").modal();

                var i = 0;
                var timeout = 750;

                (function progressbar()
                {
                    i++;
                    if(i < 1000)
                    {
                        // some code to make the progress bar move in a loop with a timeout to 
                        // control the speed of the bar
                        iterateProgressBar();
                        setTimeout(progressbar, timeout);
                    }
                }
                )();
            }
            catch(err)
            {
                alert(err.message);
            }
        });

When the process completes close the progress bar

        $(document).ajaxStop(function(){
            // hide the progress bar
            $("#progressDialog").modal('hide');
        });

Gabriel Glauber · Accepted Answer · 2016-10-26 17:09:23Z

After much searching a way to show a progress bar just to make the most elegant charging could not find any way that would serve my purpose. Check the actual status of the request showed demaziado complex and sometimes snippets not then worked created a very simple way but it gives me the experience seeking (or almost), follows the code:

$.ajax({
    type : 'GET',
    url : url,
    dataType: 'html',
    timeout: 10000,
    beforeSend: function(){
        $('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
        $('.progress-bar').animate({width: "30%"}, 100);
    },
    success: function(data){  
        if(data == 'Unauthorized.'){
            location.href = 'logout';
        }else{
            $('.progress-bar').animate({width: "100%"}, 100);
            setTimeout(function(){
                $('.progress-bar').css({width: "100%"});
                setTimeout(function(){
                    $('.my-box').html(data);
                }, 100);
            }, 500);
        }
    },
    error: function(request, status, err) {
        alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
    }
});

NoWar · Accepted Answer · 2016-08-04 14:21:51Z

I did it like this

CSS

html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    /* For the loading indicator to be vertically centered ensure */
    /* the html and body elements take up the full viewport */
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #333 url('/Images/loading.gif') no-repeat 50% 50%;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}

JS

$(document).ready(function () {
   $(document).ajaxStart(function () {     
       $("html").addClass("loading");
    });
    $(document).ajaxStop(function () {        
        $("html").removeClass("loading");
    });
    $(document).ajaxError(function () {       
        $("html").removeClass("loading");
    }); 
});

vibs2006 · Accepted Answer · 2018-04-20 17:18:43Z

2

I know that are already many answers written for this solution however I want to show another javascript method (dependent on JQuery) in which you simply need to include ONLY a single JS File without any dependency on CSS or Gif Images in your code and that will take care of all progress bar related animations that happens during Ajax Request. You need to simnply pass javascript function like this

var objGlobalEvent = new RegisterGlobalEvents(true, "");

Here is the working fiddle for the code. https://jsfiddle.net/vibs2006/c7wukc41/3/

answered Apr 20, 2018 at 17:18

vibs2006

6,6524 gold badges42 silver badges44 bronze badges

3 Comments

vibs2006 Over a year ago

@searchengine27 This screenshot is NOT for reading code. It was posted to let you know the graphic preview of the loader. If you can notice then I have also included link of code fiddle on which clicking you'll get the whole code.

JuanFernandoz Over a year ago

This is more than 400kb... pretty bad solution.

vibs2006 Over a year ago

@JuanFernandoz If Size is issue then you can replace inline embed image with your external gif src .

Mike Szyndel · Accepted Answer · 2022-08-16 20:23:48Z

1

I usually use this since it's simpler and more useful.

<input id="datainput" type="text">
<div id="result"></div>
<button id="examplebutton"></button>
<script>
    $("#examplebutton").click(function(){
        let data=$("#datainput").val(); 
        $("#result").html("Please Wait..");  // it starts working when the button is clicked
        
        $.ajax({
            url:"../ajax/xyz.php",
            type:"POST",
            data:{data:data},
            success:function(result)
            {
                $("#result").html(result);  // When the data comes, the text will be deleted and the data will come.
            }
        });
    });
</script>

edited Aug 16, 2022 at 20:23

Mike Szyndel

10.6k11 gold badges51 silver badges64 bronze badges

answered Oct 20, 2021 at 9:17

Burak Kömürcü

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Ali · Accepted Answer · 2013-11-20 11:49:32Z

0

try this it may help you

 $.ajax({
  type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
  beforeSend: function(  ) {
    // load your loading fiel here
  }
})
  .done(function( data ) {
    //hide your loading file here
  });

answered Nov 20, 2013 at 11:49

Ali

2311 gold badge4 silver badges17 bronze badges

1 Comment

M H Over a year ago

Not close to what the op was asking for. he wants to display the progress as it loads, not just a loading gif.

Maitry Gohil · Accepted Answer · 2021-12-31 10:58:18Z

0

Well this will definitely work.
Here we go...

function yourFunction(){
    
    setTimeout(function(){
        $('#loading').show();
        
        setTimeout(function(){
            //your ajax code goes here...
            $('#loading').hide();           
        }, 500);

    }, 300);
}

You can set css to your progress bar according to your requirement. Hide this div by default.

<div id="loading">
    <img id="loading-image" src="img-src" alt="Loading..." />
</div>

answered Dec 31, 2021 at 10:58

Maitry Gohil

1012 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to show progress bar while loading, using ajax

11 Answers 11

9 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

9 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related