Javascript Countdown with Twitter Bootstrap Progress Bar

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

Check this out http://stackoverflow.com/q/10007212/434171 – Marcos Feb 16 '13 at 13:30 — Marcos, Feb 16 '13 at 13:30

score 8 · Accepted Answer · edited Jun 16 '20 at 15:44

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>

Wow, really awesome! Could you just tell me how to make the page reload when the countdown gets to zero? — Benedict Lewis, Feb 26 '13 at 12:41

Javascript Countdown with Twitter Bootstrap Progress Bar

1 Answers1

Linked