Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
  <div class="pagination">
3
    <p>without gradient</p>
4
    <a href="#" class="page">first</a><a href="#" class=
5
    "page">2</a><a href="#" class="page">3</a><span
6
    class="page active">4</span><a href="#" class=
7
    "page">5</a><a href="#" class="page">6</a><a href="#"
8
    class="page">last</a>
9
  </div>
10
 
11
  <div class="pagination">
12
    <p>with gradient</p>
13
    <a href="#" class="page gradient">first</a><a href=
14
    "#" class="page gradient">2</a><a href="#" class=
15
    "page gradient">3</a><span class=
16
    "page active">4</span><a href="#" class=
17
    "page gradient">5</a><a href="#" class=
18
    "page gradient">6</a><a href="#" class=
19
    "page gradient">last</a>
20
  </div>
21
 
22
  <div class="pagination dark">
23
    <p>dark without gradient</p>
24
    <a href="#" class="page dark">first</a><a href="#"
25
    class="page dark">2</a><a href="#" class=
26
    "page dark">3</a><span class=
27
    "page dark active">4</span><a href="#" class=
28
    "page dark">5</a><a href="#" class=
29
    "page dark">6</a><a href="#" class=
30
    "page dark">last</a>
31
  </div>
32
 
33
  <div class="pagination dark">
34
    <p>dark with gradient</p>
35
    <a href="#" class="page dark gradient">first</a><a
36
    href="#" class="page dark gradient">2</a><a href="#"
37
    class="page dark gradient">3</a><span class=
38
    "page dark active">4</span><a href="#" class=
39
    "page dark gradient">5</a><a href="#" class=
40
    "page dark gradient">6</a><a href="#" class=
41
    "page dark gradient">last</a>
42
  </div>
43
</div>
44
 
 
CSS 
body {
1
body {
2
    background: #dfdfdf;
3
    color: #666;
4
    font: 14px/24px sans-serif;
5
}
6
 
7
#container {
8
    width: 600px;
9
    margin: 0 auto;
10
    padding: 20px;
11
}
12
 
13
.btn {
14
    display: inline-block;
15
    padding: 10px;
16
    border-radius: 5px; /*optional*/
17
    color: #aaa;
18
    font-size: .875em;
19
}
20
 
21
.pagination {
22
    background: #f2f2f2;
23
    padding: 20px;
24
    margin-bottom: 20px;
25
}
26
 
27
.page {
28
    display: inline-block;
29
    padding: 0px 9px;
30
    margin-right: 4px;
31
    border-radius: 3px;
32
    border: solid 1px #c0c0c0;
33
    background: #e9e9e9;
34
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
35
    font-size: .875em;
36
    font-weight: bold;
37
    text-decoration: none;
38
    color: #717171;
39
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
40
}
41
 
42
.page:hover, .page.gradient:hover {
43
    background: #fefefe;
44
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
45
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
46
}
47
 
48
.page.active {
49
    border: none;
50
    background: #616161;
51
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
52
    color: #f0f0f0;
53
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
54
}
55
 
56
.page.gradient {
57
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
58
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
59
}
60
 
61
.pagination.dark {
62
    background: #414449;
63
    color: #feffff;
64
}
65
 
66
.page.dark {
67
    border: solid 1px #32373b;
68
    background: #3e4347;
69
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
70
    color: #feffff;
71
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
72
}
73
 
74
.page.dark:hover, .page.dark.gradient:hover {
75
    background: #3d4f5d;
76
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
77
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
78
}
79
 
80
.page.dark.active {
81
    border: none;
82
    background: #2f3237;
83
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
84
}
85
 
86
.page.dark.gradient {
87
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
88
    background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
89
}
 

CSS Pagination Styles

CSSDeck G+