jQuery('.progress', form).css('width', '0');

        xhr: function () {

            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    percentComplete = parseInt(percentComplete * 100);
                    jQuery('.progress', form).text(percentComplete + '%');
                    jQuery('.progress', form).css('width', percentComplete + '%');
            }, false);
            return xhr;
        type: 'POST',
        url: badnc_ajax.ajaxurl,
        data: data,
        success: function (data) {
            jQuery("div[id='results']", form).css('display', 'block');
            jQuery("div[id='loading']", form).css('display', 'none');
            jQuery("div[id='results']", form).html(unescape(data));


This code is showing progressbar when I submit the form. Only problem is progressbar shows after receiving the response.

I mean progressbar shows after displaying the message from PHP file.

I want to show the percent counter increasing and whenever it reaches 100% then show response.

Read more here: WordPress Jquery Ajax form progress bar loading quickly after showing response


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: