AJAX , Javascript to show progress of a script running

There are two ways you could do this depending on what is in the database before the first insertion by the script started by the AJAX request. One way would be to have an extra entry in some database table, that get's the percentage complete from the PHP script every time one entry was changed.
This is the script that puts your data in the database.

$array = array(/*50,000 entries here from the ajax request*/);
$counter = 0;
foreach($array as $entry){
    // do the insertion in the database
    $percentage = $counter / count($array);
    // insert $percentage in the database in another table
}

Then you can make another AJAX request to a script that returns the value of database field that stores the calculated percentage every (tenth-)second.

If the database is empty before you make the request you have to count how many entries you will insert before you make the AJAX request and save it in a variable in the JS.
Then you can make another AJAX request every (tenth-)second and that php should just count the database entries in the table, pass it to the JS and the JS calculates the percentages.

What I'd do not to block the UI is to keep track of the progress in the DB with a SESSION variable or writing to a log file or table in the DB. Session is better as you don't need to keep track of concurrency and race condition.

Then from the browser make an AJAX call every second or the time you decide to read the SESSION variable and update the progress bar.

When the original AJAX call that does the main process finish, you complete the progress bar and/or show a complete message to the user.

This is a sample to show progress. '#progressBar' is the id of a bootstrap progressbar

$.ajax({
            xhr:function(){
                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + "%").text(percent + "%");
                            if (percent == 100)
                            {
                                complete = 1;
                            }
                        }
                    });
                    return xhr;
                },
            type:'POST',
            url: '',
            success:function(response) {
            //success code....
            }
     });