带有 Twitter Bootstrap 进度条的 Javascript 倒计时

Question

I am working with the Twitter Bootstrap. I need to redirect the page after 30 seconds. I want to use the Twitter Bootstrap Progress Bar to indicate how long till the page redirects (So the page redirects when the bar is at 100%). Please could someone help me with the Javascript and HTML code to do this.

Thanks ;)

Answer 1

Very basic example:

var bar = document.getElementById('progress'),
    time = 0, max = 5,
    int = setInterval(function() {
        bar.style.width = Math.floor(100 * time++ / max) + '%';
        time - 1 == max && clearInterval(int);
    }, 1000);

Code wrapped in function:

 function countdown(callback) { var bar = document.getElementById('progress'), time = 0, max = 5, int = setInterval(function() { bar.style.width = Math.floor(100 * time++ / max) + '%'; if (time - 1 == max) { clearInterval(int); // 600ms - width animation time callback && setTimeout(callback, 600); } }, 1000); } countdown(function() { alert('Redirect'); });

 body {padding: 50px;}

 <link href="//getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> <div class="progress"> <div class="bar" id="progress"></div> </div>