Ajax Loader
HTML 
    <ol class="rounded-list">
1
    <ol class="rounded-list">
2
        <li><a href="">List item</a></li>
3
        <li><a href="">List item</a></li>
4
        <li><a href="">List item</a>
5
            <ol>
6
                <li><a href="">List sub item</a></li>
7
                <li><a href="">List sub item</a></li>
8
                <li><a href="">List sub item</a></li>
9
            </ol>
10
        </li>
11
        <li><a href="">List item</a></li>
12
        <li><a href="">List item</a></li>                      
13
    </ol>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
1
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
2
ol {
3
  counter-reset: li;
4
  list-style: none;
5
  *list-style: decimal; /* Keep using default numbering for IE6/7 */
6
  font: 15px 'Merriweather Sans', 'lucida sans', sans-serif;
7
  padding: 0;
8
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
9
  width: 300px;
10
  margin: 0 auto;
11
}
12
ol ol {
13
  margin-left: 2em;
14
}
15
.rounded-list a {
16
  position: relative;
17
  display: block;
18
  padding: .4em .4em .4em 2em;
19
  *padding: .4em;
20
  margin: .5em 0;
21
    background: #ddd;
22
  color: #444;
23
    text-decoration: none;
24
  border-radius: .3em;
25
    transition: all .5s ease-out;
26
}
27
.rounded-list a:hover{
28
  background: #eee;
29
}
30
 
31
.rounded-list a:hover:before{
32
    transform: rotate(360deg);
33
    -webkit-transform:rotate(360deg);
34
}
35
 
36
.rounded-list a:before{
37
  content: counter(li);
38
  counter-increment: li;
39
  position: absolute;
40
  left: -1.3em;
41
  top: 50%;
42
  margin-top: -1.3em;
43
  background: #87ceeb;
44
  height: 2em;
45
  width: 2em;
46
  line-height: 2em;
47
  border: .3em solid #fff;
48
  text-align: center;
49
  font-weight: bold;
50
  border-radius: 2em;
51
  transition: all .3s ease-out;
52
}
 

CSS3 Ordered List Style

CSSDeck G+