Ajax Loader
HTML 
<div id="wrapper">
1
<div id="wrapper">
2
  Loading ... <i class="spin mini"></i>
3
  <hr />
4
  <i class="spin extra-large"></i>
5
  <hr />
6
  <i class="spin large"></i>
7
  <hr />
8
  <i class="spin"></i>
9
  <hr />
10
  <i class="spin small"></i>
11
  <hr />
12
  <i class="spin mini"></i>
13
</div>
 
CSS 
/*********************************************************
1
/*********************************************************
2
 *  CSS3 Animation spinner
3
 *
4
 *  Based on an ideea by http://goo.gl/cUuxW
5
 *  Copyright 2013 - birkof.ro
6
 *********************************************************/
7
body {
8
  background: #4786b3; /* Old browsers */
9
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
10
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0Nzg2YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMmU1NjczIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
11
  background: -moz-radial-gradient(center, ellipse cover,  #4786b3 0%, #2e5673 100%); /* FF3.6+ */
12
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4786b3), color-stop(100%,#2e5673)); /* Chrome,Safari4+ */
13
  background: -webkit-radial-gradient(center, ellipse cover,  #4786b3 0%,#2e5673 100%); /* Chrome10+,Safari5.1+ */
14
  background: -o-radial-gradient(center, ellipse cover,  #4786b3 0%,#2e5673 100%); /* Opera 12+ */
15
  background: -ms-radial-gradient(center, ellipse cover,  #4786b3 0%,#2e5673 100%); /* IE10+ */
16
  background: radial-gradient(center, ellipse cover,  #4786b3 0%,#2e5673 100%); /* W3C */
17
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4786b3', endColorstr='#2e5673',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
18
  background-repeat: no-repeat;
19
  background-attachment: fixed;
20
}
21
#wrapper { margin: 5% auto; width: 50%; text-align: center }
22
.spin {
23
  background-color: transparent;
24
  border: 2px solid rgba(0, 0, 0, .4);
25
  border-top-color: transparent;
26
  border-left-color: transparent;
27
  border-radius: 150px;
28
  display: inline-block;
29
  width: 12px;
30
  height: 12px;
31
  margin-bottom: 3px;
32
  vertical-align: middle;
33
  -webkit-animation: spin .5s infinite linear;
34
  -moz-animation: spin .5s infinite linear;
35
  -ms-animation: spin .5s infinite linear;
36
  -o-animation: spin .5s infinite linear;
37
  animation: spin .5s infinite linear;
38
}
39
.spin.mini {
40
  border-width: 2px;
41
  width: 4px;
42
  height: 4px;
43
}
44
.spin.small {
45
  border-width: 2px;
46
  width: 8px;
47
  height: 8px;
48
}
49
.spin.large {
50
  border-width: 3px;
51
  width: 22px;
52
  height: 22px;
53
}
54
.spin.extra-large {
55
  border-width: 4px;
56
  width: 32px;
57
  height: 32px;
58
}
59
@-webkit-keyframes spin { /* Safari and Chrome */
60
  0% { -webkit-transform: rotate(0deg); }
61
  100% { -webkit-transform: rotate(360deg); }
62
}
63
@-moz-keyframes spin { /* Firefox */
64
  0% { -moz-transform: rotate(0deg); }
65
  100% { -moz-transform: rotate(360deg); }
66
}
67
@-ms-keyframes spin { /* IE */
68
  0% { -ms-transform: rotate(0deg); }
69
  100% { -ms-transform: rotate(360deg); }
70
}
71
@-o-keyframes spin { /* Opera */
72
  0% { -o-transform: rotate(0deg); }
73
  100% { -o-transform: rotate(360deg); }
74
}
75
@keyframes spin {
76
  0% { transform: rotate(0deg); }
77
  100% { transform: rotate(360deg); }
78
}
 

CSS3 Animation spinner

CSSDeck G+