Ajax Loader
HTML 
<a class="one" href="#"></a>
1
<a class="one" href="#"></a>
2
<a class="two" href="#"></a>
3
<a class="san" href="#"></a>
4
<br>
5
<a class="yon" href="#"></a>
6
<a class="goo" href="#"></a>
7
<a class="rok" href="#"></a>
8
<a class="ryk" href="#"></a>
9
<br>
10
<a class="x7" href="#"></a>
11
<a class="x8" href="#"></a>
12
<a class="x9" href="#"></a>
 
CSS 
body {
1
body {
2
  padding: 10px 0 0 10px;
3
}
4
 
5
a {
6
    display:inline-block;
7
    -webkit-box-sizing:border-box;
8
    -moz-box-sizing:border-box;
9
    box-sizing:border-box;
10
    width:100px;
11
    height:100px;
12
    -webkit-border-radius:50px;
13
    -moz-border-radius:50px;
14
    border-radius:50px;
15
  
16
    background-image:url(data:image/gif;base64,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);
17
    background-repeat:no-repeat;
18
    background-origin:border-box;
19
    background-position:50% 50%;
20
  
21
    border-width:50px;
22
    border-color:rgba(0,0,0,0);
23
  
24
    -webkit-transition:0.5s ease;
25
    -moz-transition:0.5s ease;
26
    -ms-transition:0.5s ease;
27
    -o-transition:0.5s ease;
28
    transition:0.5s ease;
29
}
30
 
31
a:hover {
32
    border-width:0;
33
    border-color:rgba(0,0,0,0.5);
34
}
35
 
36
a.one {border-style:solid;}
37
a.two {border-style:dashed;}
38
a.san {border-style:dotted;}
39
 
40
 
41
a.yon       {border:50px solid  rgba(0,0,0,0.7);}
42
a.goo       {border:50px dashed rgba(0,0,0,0.7);}
43
a.rok       {border:50px dotted rgba(0,0,0,0.7);}
44
a.ryk       {border:50px double rgba(0,0,0,0.7);}
45
a.yon:hover {border: 1px solid  rgba(0,0,0,0.7);}
46
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
47
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
48
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}
49
 
50
 
51
a.x7,
52
a.x8,
53
a.x9 {
54
    -webkit-border-radius:0;
55
  -moz-border-radius:0;
56
    border-radius:0;
57
}
58
a.x7       {border:50px solid  rgba(0,0,0,0.7);}
59
a.x8       {border:50px dashed rgba(0,0,0,0.7);}
60
a.x9       {border:50px dotted rgba(0,0,0,0.7);}
61
a.x7:hover {border: 1px solid  rgba(0,0,0,0.7);}
62
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
63
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}
 

10 Crazy Effects with CSS3 Border Transitions

CSSDeck G+