CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Plasticated
Plasticated

Reputation: 141

Generating a jQuery UI progress bar

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);
  }
});

Upvotes: 0

Views: 675

Answers (2)

dotjoe
dotjoe

Reputation: 26940

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

Upvotes: 0

Yuval Adam
Yuval Adam

Reputation: 165340

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

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

For more info see the docs.

Upvotes: 1

Related Questions