Ajax Loader
×
HTML 
<div class="ball n1"></div>
1
<div class="ball n1"></div>
2
<div class="ball n2"></div>
3
<div class="ball n3"></div>
4
<div class="ball n4"></div>
5
<div class="ball n5"></div>
6
<div class="ball n6"></div>
7
<div class="ball n7"></div>
8
<div class="ball n8"></div>
9
<div class="ball n9"></div>
10
<div class="ball n10"></div>
11
 
 
CSS 
body {
1
body {
2
  background: #ABAB99;
3
}
4
.ball {
5
  border-radius: 50%;
6
  border: 1px solid white;
7
  display: inline-block;
8
  position: absolute;
9
  width: 55px;
10
  height: 55px;
11
  box-shadow: 1px 1px 5px #000, 1px 1px 3px #666 inset;
12
}
13
 
14
.ball:after {
15
  content: '';
16
  width: 25px;
17
  height: 25px;
18
  margin: auto;
19
  position: absolute;
20
  top: 0; left: 0; bottom: 0; right: 0;
21
  text-align: center;
22
  line-height: 25px;
23
  background: rgba(255, 255, 255, .5);
24
  border-radius: 50%;
25
  box-shadow: 0px 0px 5px white;
26
  color: white;
27
  text-shadow: 1px 1px 5px #333;
28
}
29
 
30
.n1 {
31
  background: #ab3243;
32
  top: 20%;
33
  left: 20%;
34
}
35
.n1:after { content: '1'; }
36
 
37
.n2 {
38
  background: #6B2069;
39
  top: 25%;
40
  left: 50%;
41
}
42
.n2:after { content: '2'; }
43
 
44
.n3 {
45
  background: #abbc38;
46
  top: 10%;
47
  left: 75%;
48
}
49
.n3:after { content: '3'; }
50
 
51
.n4 {
52
  background: #83BC83;
53
  top: 35%;
54
  left: 5%;
55
}
56
.n4:after { content: '4'; }
57
 
58
.n5 {
59
  background: #3883BC;
60
  top: 45%;
61
  left: 40%;
62
}
63
.n5:after { content: '5'; }
64
 
65
.n6 {
66
  background: #43ab43;
67
  top: 30%;
68
  left: 80%;
69
}
70
.n6:after { content: '6'; }
71
 
72
.n7 {
73
  background: #43abab;
74
  top: 60%;
75
  left: 70%;
76
}
77
.n7:after { content: '7'; }
78
 
79
.n8 {
80
  background: #abab43;
81
  top: 70%;
82
  left: 10%;
83
}
84
.n8:after { content: '8'; }
85
 
86
.n9 {
87
  background: #ab32ab;
88
  top: 80%;
89
  left: 40%;
90
}
91
.n9:after { content: '9'; }
92
 
93
.n10 {
94
  background: #3243ab;
95
  top: 1%;
96
  left: 25%;
97
}
98
.n10:after { content: '10'; }
 

Numbered Balls

CSSDeck G+