进度栏不断加载Javascript

Question

When the user clicks Generate a bar animates showing the user that the task is loading.

What changes do I need to do in my code in order for the bar to animate while the results are being produced and stop animating when the results are ready.

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

DEMO

Answer 1

将data-percentage属性添加到bar div。

<div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-percentage="100" style="width: 0%;"></div>