Generating a jQuery UI progress bar

Question

I'm using a 3rd party service to process images and they provide a handy jQuery plugin. The plugin can output feedback on the upload transfer, and I would like to display this as a nice jQuery progress bar from the jQuery UI.

Here is the example they give, which currently just shows the transfer status as text:

$('#MyForm').transloadit({
  modal: false,
  onProgress: function(bytesReceived, bytesExpected) {
    // render your own progress bar!
    $('#progress')
      .text((bytesReceived / bytesExpected * 100).toFixed(2)+'%');
  },
  onError: function(assembly) {
    alert(assembly.error+': '+assembly.message);
  }
});

Answer 1

In order to update the Progess Bar value, use this:

$("#progress").progressbar("value", ((bytesReceived / bytesExpected) * 100));

For more info see the docs.

Answer 2

$('#progress').progressbar("option", "value", bytesReceived / bytesExpected * 100);