Ajax Loader
HTML 
<ul id="skill">
1
<ul id="skill">
2
  <li><span class="bar graphic-design"></span><h3>Graphic Design</h3></li>
3
  <li><span class="bar html-css"></span><h3>Html // Css</h3></li>
4
  <li><span class="bar jquery"></span><h3>jQuery // MoTools</h3></li>
5
  <li><span class="bar wordpress"></span><h3>Wordpress</h3></li>
6
</ul>
 
CSS 
body { background: #E9E5E2 ; }
1
body { background: #E9E5E2 ; }
2
 
3
#skill {
4
  list-style: none;
5
  font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
6
  width: 296px;
7
  margin: 50px auto 0;
8
  position: relative;
9
  line-height: 2em;
10
  padding: 30px 0;
11
}
12
 
13
#skill li {
14
  margin-bottom:50px;
15
  background:#e9e5e2;
16
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
17
  background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
18
  background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
19
  background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
20
  background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
21
  background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
22
  height:20px;
23
  border-radius:10px;
24
  -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
25
  -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
26
  box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
27
}
28
 
29
#skill li h3 {
30
  position:relative;
31
  top:-25px;
32
}
33
 
34
.bar {
35
  height:18px;
36
  margin:1px 2px;
37
  position:absolute;
38
  border-radius:10px;
39
  -moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
40
  -webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
41
  box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
42
}
43
 
44
.graphic-design {
45
  width:100%;
46
  -moz-animation:graphic-design 2s ease-out;
47
  -webkit-animation:graphic-design 2s ease-out;
48
  background-color: #f674a4;
49
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
50
  background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
51
  background-image: -moz-linear-gradient(top, #f674a4, #e06995);
52
  background-image: -ms-linear-gradient(top, #f674a4, #e06995);
53
  background-image: -o-linear-gradient(top, #f674a4, #e06995);
54
  background-image: linear-gradient(top, #f674a4, #e06995);
55
}
56
 
57
.html-css {
58
  width:90%;
59
  -moz-animation:html-css 2s ease-out;
60
  -webkit-animation:html-css 2s ease-out;
61
  background-color: #f0bb4b;
62
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0bb4b), to(#d9aa44));
63
  background-image: -webkit-linear-gradient(top, #f0bb4b, #d9aa44);
64
  background-image: -moz-linear-gradient(top, #f0bb4b, #d9aa44);
65
  background-image: -ms-linear-gradient(top, #f0bb4b, #d9aa44);
66
  background-image: -o-linear-gradient(top, #f0bb4b, #d9aa44);
67
  background-image: linear-gradient(top, #f0bb4b, #d9aa44);
68
}
69
 
70
.jquery {
71
  width:65%;
72
  -moz-animation:jquery 2s ease-out;
73
  -webkit-animation:jquery 2s ease-out;
74
  background-color: #a1ce5b;
75
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a1ce5b), to(#91ba52));
76
  background-image: -webkit-linear-gradient(top, #a1ce5b, #91ba52);
77
  background-image: -moz-linear-gradient(top, #a1ce5b, #91ba52);
78
  background-image: -ms-linear-gradient(top, #a1ce5b, #91ba52);
79
  background-image: -o-linear-gradient(top, #a1ce5b, #91ba52);
80
  background-image: linear-gradient(top, #a1ce5b, #91ba52);
81
}
82
 
83
.wordpress {
84
  width:80%;
85
  -moz-animation:wordpress 2s ease-out;
86
  -webkit-animation:wordpress 2s ease-out;
87
  background-color: #66b3cc;
88
  background-image: -webkit-gradient(linear, left top, left bottom, from(#66b3cc), to(#5da3ba));
89
  background-image: -webkit-linear-gradient(top, #66b3cc, #5da3ba);
90
  background-image: -moz-linear-gradient(top, #66b3cc, #5da3ba);
91
  background-image: -ms-linear-gradient(top, #66b3cc, #5da3ba);
92
  background-image: -o-linear-gradient(top, #66b3cc, #5da3ba);
93
  background-image: linear-gradient(top, #66b3cc, #5da3ba)
94
}
95
 
96
@-moz-keyframes graphic-design {0%  { width:0px;} 100%{ width:100%;}  }
97
@-moz-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
98
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
99
@-moz-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }
100
 
101
@-webkit-keyframes graphic-design       { 0%  { width:0px;} 100%{ width:100%;}  }
102
@-webkit-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
103
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
104
@-webkit-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }
105
 
 

Slow load progress bars with CSS

CSSDeck G+