当用户单击“生成”时，会显示一个动画条，向用户显示任务正在加载。
我需要在我的代码中进行哪些更改，以便在生成结果时条形图进行动画处理，并在结果准备好时停止动画化。
HTML：
<button class="btn" id="generate" type="submit">Generate</button>
<div class="result" id="rslt"></div>
<div class="progress">
<div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-percentage="100" style="width: 0%;"></div>
</div>
JAVASCRIPT：
var generateButton = document.getElementById("generate");
if (generateButton.addEventListener) {
generateButton.addEventListener("click", random, false);
}
else if (generateButton.attachEvent) {
generateButton.attachEvent('onclick', random);
}
function random(e) {
setTimeout(function(){
$('.progress .bar').each(function() {
var me = $(this);
var perc = me.attr("data-percentage");
//TODO: left and right text handling
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.css('width', (current_perc)+'%');
}
me.text((current_perc)+'%');
}, 50);
});
},300);
var num = Math.random();
var greetingString = num;
document.getElementById("rslt").innerText = greetingString;
}