Ajax Loader
HTML
<div id="countdown"></div> 
1
<div id="countdown"></div> 
 
CSS
*{ padding: 0; margin: 0;}
1
*{ padding: 0; margin: 0;}
2
body {
3
    background: #f5f5f5;
4
    position: relative;
5
}
6
 
7
::-moz-selection {
8
    background-color: #444;
9
    color: #fff;
10
    text-shadow: 0 -1px 0 rgba(0,0,0,.25)
11
}
12
 
13
::selection {
14
    background-color: #444;
15
    color: #fff;
16
    text-shadow: 0 -1px 0 rgba(0,0,0,.25)
17
}
18
 
19
#countdown {
20
    background: #e5e5e5;
21
    color: #888;
22
    font-family: Arial, Helvetica, sans-serif;
23
    position: absolute;
24
    top: 30em;
25
    left: 50%;
26
    width: 40%;
27
    text-align: center;
28
    text-shadow: 0 1px 0 #f5f5f5;
29
    padding: 1em 0;
30
    margin: -20em 0 0 -20%;
31
    -webkit-border-radius: 6px;
32
    -moz-border-radius: 6px;
33
    border-radius: 6px;
34
    box-shadow: inset 0 1px 3px #ccc, 0 1px 0 #fff;
35
}
 
JavaScript
var interval;
1
var interval;
2
    var minutes = 0;
3
    var seconds = 10;
4
    window.onload = function() {
5
        countdown('countdown');
6
    }
7
 
8
    function countdown(element) {
9
        interval = setInterval(function() {
10
            var el = document.getElementById(element);
11
            if(seconds == 0) {
12
                if(minutes == 0) {
13
                    el.innerHTML = "Redirecting you to the Fireworks Police!";                    
14
                    clearInterval(interval);
15
                    return;
16
                } else {
17
                    minutes--;
18
                    seconds = 60;
19
                }
20
            }
21
            if(minutes > 0) {
22
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
23
            } else {
24
                var minute_text = '';
25
            }
26
            var second_text = seconds > 1 ? 'seconds' : 'second';
27
            el.innerHTML = 'You will be redirected in ' + minute_text + ' ' + seconds + ' ' + second_text ;
28
            seconds--;
29
        }, 1000);
30
    }
 

Countdown

CSSDeck G+