Progress bar in laravel

You can try making an Ajax request through jQuery. I leave you a functional example and below your explanation:

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};
function doProgress(evt) {
  if (evt.lengthComputable) {
      var percentComplete = evt.loaded / evt.total;
      console.log(percentComplete);
      $('.progress').attr({
          value: percentComplete * 100
      });
      if (percentComplete === 1) {
          $('.progress').addClass('hide');
      }
  }
}
$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", doProgress, false);
        xhr.addEventListener("progress", doProgress, false);
        return xhr;
    },
    type: 'POST',
    url: "https://jsonplaceholder.typicode.com/todos/1",
    data: data,
    success: function (data) {}
});

.progress {
    display: block;
    width: 100%;
    height: 40px;
    background: #ddd;
}

.progress.hide {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-center">jQuery: AJAX progress bar</h1>
<progress class="progress" value="0" max="100"></progress> 

Explanation:

The first thing is simply to have the data that will be sent. For this example, an array is simply filled with 100,000 example records.

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

Once you have the information you want to send to the server, it would be necessary to create a function that allows us to know the percentage of upload.

function doProgress(evt) {
  if (evt.lengthComputable) {
      var percentComplete = evt.loaded / evt.total;
      console.log(percentComplete);
      $('.progress').attr({
          value: percentComplete * 100
      });
      if (percentComplete === 1) {
          $('.progress').addClass('hide');
      }
  }
}

• evt.lengthComputable : is a Boolean indicator that indicates whether the resource in question the ProgressEvent has a length that can be calculated.
• evt.loaded : is a numeric indicator that represents the amount of work already done , that is, what has already been uploaded or downloaded from our file.
• evt.total : is an indicator number that represents the total amount of work to perform. That is, what should be downloaded or uploaded.
• percentComplete : The division of the already loaded or downloaded over the total. This division will throw us a number greater than or equal to 0 and less than or equal to 1.
• percentComplete * 100 : We multiply the already loaded or downloaded by 100, so that the resulting value is greater than or equal to 0 and less than or equal to 100.
• percentComplete === 1 : If what is already loaded is equal to 1, it means that we have finished uploading or downloading our data.

Now we only need to create our ajax request according to our wishes.

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", doProgress, false);
        xhr.addEventListener("progress", doProgress, false);
        return xhr;
    },
    type: 'POST',
    url: "https://jsonplaceholder.typicode.com/todos/1",
    data: data,
    success: function (data) {}
});

• xhr.upload.addEventListener("progress", doProgress, false); : we add the function created as listener for the progress of the request in the upload
• xhr.addEventListener("progress", doProgress, false); : we add the function created as a listener for the progress of the request

I hope you find it useful.

Greetings!

Original source ( In English ): link