Индикатор выполнения во время httpUploadProgress

Question

Я пытаюсь создать индикатор выполнения, видимый пользователю для загрузки, который происходит с ajax. Загрузка отправляется в ведро s3. Вот мой скрипт для отправки файла в ведро:

var upload = s3.upload(
    {Bucket: 'tgr-video-ingest', Key: rCreds.ObjectKey, Body: file} 
); 

upload.on('httpUploadProgress', function (progress) { 
    var pct = Math.round(progress.loaded/progress.total * 100); 
    $('#progress').html(pct + '%'); 
});    

В настоящее время я пишу прогресс в аре теге, но хочу, чтобы отобразить его в HTML-элементе, который анимационный как прогресс загрузки бар. Есть ли способ анимировать элемент, основанный на позиции загрузки httpUploadProgress?

Answer 1

Я понял это, отвечая на свой вопрос в надежде, что он когда-нибудь поможет кому-то другому.

var pct = Math.round(progress.loaded/progress.total * 100); 
    $('#percentage').html(pct + '%'); 
    var progressBar = document.getElementsByTagName("progress")[0], 
    animation = function(){ 
     progressBar.value = (pct); 
    }; 
    setTimeout(function(){animation();}); 
    if (pct == 100) { 
     $('#percentage').html('DONE'); 
    } 

Используя прогресс HTML элемент, я задаю ему значение equeal к переменной «проц», который является количество завершено в в httpUploadProgress. Я делаю это, используя функцию анимации, которая запускается сразу после вызова setTimeout.

Более того, я заменяю процентное количество, заполненное словом «DONE», когда httpUploadProgress завершен и достиг 100.