Ajax Loader
HTML
<h2>Default</h2>
1
<h2>Default</h2>
2
<div class="pagination">
3
  <ul>
4
    <li><a href="#">Prev</a></li>
5
    <li class="active">
6
      <a href="#">1</a>
7
    </li>
8
    <li><a href="#">2</a></li>
9
    <li><a href="#">3</a></li>
10
    <li><a href="#">4</a></li>
11
    <li><a href="#">Next</a></li>
12
  </ul>
13
</div>
14
 
15
<div class="pagination">
16
        <ul>
17
          <li><a href="#">«</a></li>
18
          <li><a href="#">10</a></li>
19
          <li class="active"><a href="#">11</a></li>
20
          <li><a href="#">12</a></li>
21
          <li><a href="#">»</a></li>
22
        </ul>
23
</div>
24
 
25
<h2>Centered</h2>
26
<div class="pagination pagination-centered">
27
        <ul>
28
          <li><a href="#"></a></li>
29
          <li class="active"><a href="#">10</a></li>
30
          <li class="disabled"><a href="#">...</a></li>
31
          <li><a href="#">20</a></li>
32
          <li><a href="#"></a></li>
33
        </ul>
34
</div>
35
 
36
<h2>Pager (Centered by default)</h2>
37
<ul class="pager">
38
  <li>
39
    <a href="#">Previous</a>
40
  </li>
41
  <li>
42
    <a href="#">Next</a>
43
  </li>
44
</ul>
45
 
46
<h2>Pager (each link aligned to sides)</h2>
47
<ul class="pager">
48
  <li class="previous">
49
    <a href="#">&larr; Older</a>
50
  </li>
51
  <li class="next">
52
    <a href="#">Newer &rarr;</a>
53
  </li>
54
</ul>
 
CSS
body {
1
body {
2
  margin: 0;
3
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4
  font-size: 13px;
5
  line-height: 18px;
6
  color: #333333;
7
  background-color: #ffffff;
8
  
9
  padding: 0 20px;
10
}
11
a {
12
  color: #0088cc;
13
  text-decoration: none;
14
}
15
a:hover {
16
  color: #005580;
17
  text-decoration: underline;
18
}
19
 
20
h2 { padding-top: 20px; }
21
h2:first-of-type { padding-top: 0; }
22
ul { padding: 0; }
23
 
24
.pagination {
25
  height: 36px;
26
  margin: 18px 0;
27
}
28
.pagination ul {
29
  display: inline-block;
30
  *display: inline;
31
  /* IE7 inline-block hack */
32
 
33
  *zoom: 1;
34
  margin-left: 0;
35
  margin-bottom: 0;
36
  -webkit-border-radius: 3px;
37
  -moz-border-radius: 3px;
38
  border-radius: 3px;
39
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
40
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
41
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
42
}
43
.pagination li {
44
  display: inline;
45
}
46
.pagination a {
47
  float: left;
48
  padding: 0 14px;
49
  line-height: 34px;
50
  text-decoration: none;
51
  border: 1px solid #ddd;
52
  border-left-width: 0;
53
}
54
.pagination a:hover,
55
.pagination .active a {
56
  background-color: #f5f5f5;
57
}
58
.pagination .active a {
59
  color: #999999;
60
  cursor: default;
61
}
62
.pagination .disabled span,
63
.pagination .disabled a,
64
.pagination .disabled a:hover {
65
  color: #999999;
66
  background-color: transparent;
67
  cursor: default;
68
}
69
.pagination li:first-child a {
70
  border-left-width: 1px;
71
  -webkit-border-radius: 3px 0 0 3px;
72
  -moz-border-radius: 3px 0 0 3px;
73
  border-radius: 3px 0 0 3px;
74
}
75
.pagination li:last-child a {
76
  -webkit-border-radius: 0 3px 3px 0;
77
  -moz-border-radius: 0 3px 3px 0;
78
  border-radius: 0 3px 3px 0;
79
}
80
.pagination-centered {
81
  text-align: center;
82
}
83
.pagination-right {
84
  text-align: right;
85
}
86
.pager {
87
  margin-left: 0;
88
  margin-bottom: 18px;
89
  list-style: none;
90
  text-align: center;
91
  *zoom: 1;
92
}
93
.pager:before,
94
.pager:after {
95
  display: table;
96
  content: "";
97
}
98
.pager:after {
99
  clear: both;
100
}
101
.pager li {
102
  display: inline;
103
}
104
.pager a {
105
  display: inline-block;
106
  padding: 5px 14px;
107
  background-color: #fff;
108
  border: 1px solid #ddd;
109
  -webkit-border-radius: 15px;
110
  -moz-border-radius: 15px;
111
  border-radius: 15px;
112
}
113
.pager a:hover {
114
  text-decoration: none;
115
  background-color: #f5f5f5;
116
}
117
.pager .next a {
118
  float: right;
119
}
120
.pager .previous a {
121
  float: left;
122
}
123
.pager .disabled a,
124
.pager .disabled a:hover {
125
  color: #999999;
126
  background-color: #fff;
127
  cursor: default;
128
}
 

Twitter Bootstrap Pagination and Pager

CSSDeck G+