Ajax Loader
HTML 
<div class="barra-area">
1
<div class="barra-area">
2
    <div class="barra">
3
            <span class="carga"></span>
4
    </div>
5
</div>
 
CSS 
.barra-area {
1
.barra-area {
2
    position:relative;
3
    display:block;
4
    width:300px;
5
    margin:100px auto
6
}
7
.barra {
8
    position:relative;
9
    display:block;
10
    width:100%;
11
    background-color:#eee;
12
    padding:3px;
13
    -webkit-border-radius:3px;
14
    -moz-border-radius:3px;
15
    -o-border-radius:3px;
16
    border-radius:3px;
17
    -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);
18
    -moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);
19
    -o-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);
20
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2)
21
}
22
.carga {
23
    height:20px;
24
    display:block;
25
    background-color:cornflowerblue;
26
    width:0%;
27
    border-radius:3px;
28
    -webkit-transition:width .8s ease;
29
    -moz-transition:width .8s ease;
30
    -o-transition:width .8s ease;
31
    transition:width .8s ease
32
}
 
JavaScript 
var width = 0;
1
var width = 0;
2
var tempo = 20;
3
var carga = document.querySelector('.carga');
4
var barra = setInterval(function(){
5
    width = width + 1;
6
    carga.style.width = width + '%';
7
    if (width === 100){
8
        clearInterval(barra);
9
        width = 0;
10
    }
11
},tempo);
 

Progress Bar with CSS & JavaScript

CSSDeck G+