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

        xhr: function () {

            var xhr = new window.XMLHttpRequest();
            xhr.upload.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 it shows 100% and then response comes from php file.
progress bar (red coloured) loads quickly

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 before 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: