Jquery ajax – Ajax request with progress bar

I have an Ajax request that uploads an image to the Imgur API, and I need to show the user a progress bar while the upload happens, I followed the instructions available in this thread but it only shows 1 and doesn’t work after that. this is the code I’m currently using

var settings = {
                    "xhr": function(){
                        var xhr = new window.XMLHttpRequest();
                        //Upload progress
                        xhr.upload.addEventListener("progress", function(evt){
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                ("#progressbar").html"percentComplete)
                                ("#progressbar").css("width",precentComplete)
                                //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;
                    },
                    "async": true,
                    "crossDomain": true,
                    "url": "https://api.imgur.com/3/upload",
                    "method": "POST",
                    "headers": {
                        "Authorization": "Client-ID <client-id>",
                        "cache-control": "no-cache",
                    },
                    "processData": false,
                    "contentType": false,
                    "mimeType": "multipart/form-data",
                    "data": form
                }

                $.ajax(settings).done(function (response) {
                    console.log(response);
                    let json = JSON.parse(response)
                    $("#prd-url").val(json.data.link)
                    $("#prd-image").html("Change Image");
                    $("#submit-prd-btn").attr("disabled",false);

                });

#button {
  width: 100%;
  background-color: #ddd;
}

#progressbar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

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

Is there any way to show a progress bar till the file is uploaded, I need a percentage-based progress bar. The maximum image size allowed to upload is 2mb, I tried uploading a 1.8mb and 200kb image both sent 1 as soon as the Ajax call was sent, but the response was sent for the Ajax call after like a 2-second delay