Ajax Loader
HTML 
<div id="circle">
1
<div id="circle">
2
<div class="circle one">
3
  <div class="circle two">
4
    <div class="circle three">
5
      <div class="circle four">
6
        <div class="circle five">
7
          <div class="circle six">
8
            <div class="circle seven">
9
              <div class="circle eight">
10
                <div class="circle nine">
11
                  <div class="circle ten">
12
                  </div>
13
                </div>
14
              </div>
15
            </div>
16
          </div>
17
        </div>
18
      </div>
19
    </div>
20
  </div>
21
</div>
22
</div>
 
CSS 
body{
1
body{
2
background: url(http://fr4phcore.tk/proyecto/imagenes/fondo.jpg);
3
}
4
#circle {
5
  position:absolute;
6
  left:0;
7
  right:0;
8
  margin:60px auto;
9
  width:320px;
10
}
11
.circle {
12
  padding:8px;
13
  border: 8px solid transparent;
14
    border-radius:400px;
15
  -webkit-animation: left 2s linear infinite;
16
  -moz-animation: left 2s linear infinite;
17
  -o-animation: left 2s linear infinite;
18
  animation: left 2s linear infinite;
19
}
20
21
.one {width:288px;
22
      height:288px;
23
      -webkit-animation-delay:1s;
24
  }
25
.two {-webkit-animation-delay:.9s;
26
  -moz-animation-delay:.9s;
27
-o-animation-delay:.9s;
28
animation-delay:.9s;}
29
.three {-webkit-animation-delay:.8s;
30
    -moz-animation-delay:.8s;
31
-o-animation-delay:.8s;
32
animation-delay:.8s;}
33
.four {-webkit-animation-delay:.7s;
34
      -moz-animation-delay:.7s;
35
-o-animation-delay:.7s;
36
animation-delay:.7s;}
37
.five {-webkit-animation-delay:.6s;
38
        -moz-animation-delay:.6s;
39
-o-animation-delay:.6s;
40
animation-delay:.6s;}
41
.six {-webkit-animation-delay:.5s;
42
          -moz-animation-delay:.5s;
43
-o-animation-delay:.5s;
44
animation-delay:.5s;}
45
.seven {-webkit-animation-delay:.4s;
46
            -moz-animation-delay:.4s;
47
-o-animation-delay:.4s;
48
animation-delay:.4s;}
49
.eight {-webkit-animation-delay:.3s;
50
              -moz-animation-delay:.3s;
51
-o-animation-delay:.3s;
52
animation-delay:.3s;}
53
.nine {-webkit-animation-delay:.2s;
54
                -moz-animation-delay:.2s;
55
-o-animation-delay:.2s;
56
animation-delay:.2s;}
57
.ten {-webkit-animation-delay:.1s;
58
                  -moz-animation-delay:.1s;
59
-o-animation-delay:.1s;
60
animation-delay:.1s;}
61
 
62
@-webkit-keyframes left{
63
  0% { border-top: 8px solid rgba(0,0,0,0.1);}
64
  100% {border-top: 8px solid #00b7f2;}
65
}
66
 
67
  @-moz-keyframes left{
68
  0% { border-top: 8px solid rgba(0,0,0,0.1);}
69
  100% {border-top: 8px solid #00b7f2;}
70
}
71
  @-o-keyframes left{
72
  0% { border-top: 8px solid rgba(0,0,0,0.1);}
73
  100% {border-top: 8px solid #00b7f2;}
74
}
75
  @keyframes left{
76
  0% { border-top: 8px solid rgba(0,0,0,0.1);}
77
  100% {border-top: 8px solid #00b7f2;}
78
}
79
 
 

CSS3 Wifi Animation

CSSDeck G+