Ajax Loader
×
HTML 
<div>
1
<div>
2
  <div></div>
3
  <div></div>
4
  <div></div>
5
  <div></div>
6
  <div></div>
7
</div>
 
CSS 
bod {
1
bod {
2
background: #4c4c4c; /* Old browsers */
3
background: -moz-linear-gradient(top, hsla(0,0%,30%,1) 0%, hsla(0,0%,40%,1) 4%, hsla(0,0%,35%,1) 7%, hsla(0,0%,28%,1) 10%, hsla(0,0%,17%,1) 19%, hsla(0,0%,0%,1) 44%, hsla(0,0%,7%,1) 60%, hsla(0,0%,17%,1) 76%, hsla(0,0%,11%,1) 91%, hsla(0,0%,7%,1) 100%); /* FF3.6+ */
4
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,30%,1)), color-stop(4%,hsla(0,0%,40%,1)), color-stop(7%,hsla(0,0%,35%,1)), color-stop(10%,hsla(0,0%,28%,1)), color-stop(19%,hsla(0,0%,17%,1)), color-stop(44%,hsla(0,0%,0%,1)), color-stop(60%,hsla(0,0%,7%,1)), color-stop(76%,hsla(0,0%,17%,1)), color-stop(91%,hsla(0,0%,11%,1)), color-stop(100%,hsla(0,0%,7%,1))); /* Chrome,Safari4+ */
5
background: -webkit-linear-gradient(top, hsla(0,0%,30%,1) 0%,hsla(0,0%,40%,1) 4%,hsla(0,0%,35%,1) 7%,hsla(0,0%,28%,1) 10%,hsla(0,0%,17%,1) 19%,hsla(0,0%,0%,1) 44%,hsla(0,0%,7%,1) 60%,hsla(0,0%,17%,1) 76%,hsla(0,0%,11%,1) 91%,hsla(0,0%,7%,1) 100%); /* Chrome10+,Safari5.1+ */
6
background: -o-linear-gradient(top, hsla(0,0%,30%,1) 0%,hsla(0,0%,40%,1) 4%,hsla(0,0%,35%,1) 7%,hsla(0,0%,28%,1) 10%,hsla(0,0%,17%,1) 19%,hsla(0,0%,0%,1) 44%,hsla(0,0%,7%,1) 60%,hsla(0,0%,17%,1) 76%,hsla(0,0%,11%,1) 91%,hsla(0,0%,7%,1) 100%); /* Opera 11.10+ */
7
background: -ms-linear-gradient(top, hsla(0,0%,30%,1) 0%,hsla(0,0%,40%,1) 4%,hsla(0,0%,35%,1) 7%,hsla(0,0%,28%,1) 10%,hsla(0,0%,17%,1) 19%,hsla(0,0%,0%,1) 44%,hsla(0,0%,7%,1) 60%,hsla(0,0%,17%,1) 76%,hsla(0,0%,11%,1) 91%,hsla(0,0%,7%,1) 100%); /* IE10+ */
8
background: linear-gradient(to bottom, hsla(0,0%,30%,1) 0%,hsla(0,0%,40%,1) 4%,hsla(0,0%,35%,1) 7%,hsla(0,0%,28%,1) 10%,hsla(0,0%,17%,1) 19%,hsla(0,0%,0%,1) 44%,hsla(0,0%,7%,1) 60%,hsla(0,0%,17%,1) 76%,hsla(0,0%,11%,1) 91%,hsla(0,0%,7%,1) 100%); /* W3C */
9
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
10
}
11
body > div {
12
  width: 50px;
13
  height: 50px;
14
  margin: 250px auto;
15
}
16
 
17
div {
18
  animation: rotate 10s linear infinite;
19
}
20
 
21
div > div {
22
  width: 25px;
23
  height: 25px;
24
}
25
 
26
div > div:nth-child(1) {
27
  float: left;
28
  border-radius: 15px 0 0;
29
  animation: background 3s infinite, opacity 6s infinite, border 3s infinite, rotate 5s linear infinite;
30
}
31
div > div:nth-child(2) {
32
  float: right;
33
  border-radius: 0 15px 0 0;
34
  animation: background 4s infinite, opacity 5s infinite, border 3s infinite, rotate 5s linear infinite;
35
}
36
div > div:nth-child(3) {
37
  clear: left;
38
  float: left;
39
  border-radius: 0 0 0 15px;
40
  animation: background 5s infinite, opacity 4s infinite, border 3s infinite, rotate 5s linear infinite;
41
}
42
div > div:nth-child(4) {
43
  float: right;
44
  border-radius: 0 0 15px;
45
  animation: background 6s infinite, opacity 3s infinite, border 3s infinite, rotate 5s linear infinite;
46
}
47
div > div:nth-child(5) {
48
  width: 50px;
49
  height: 50px;
50
  border-radius: 15px;
51
  z-index: -99;
52
  animation: background 7s infinite, opacity 2s infinite, border 2s infinite;
53
}
54
 
55
@keyframes background {
56
  0% { background: hsla(0, 50%, 50%, 0.5); }
57
  17% { background: hsla(60, 50%, 50%, 0.5); }
58
  33% { background: hsla(120, 50%, 50%, 0.5); }
59
  50% { background: hsla(180, 50%, 50%, 0.5); }
60
  67% { background: hsla(240, 50%, 50%, 0.5); }
61
  83% { background: hsla(300, 50%, 50%, 0.5); }
62
  100% { background: hsla(360, 50%, 50%, 0.5); }
63
}
64
 
65
@keyframes opacity {
66
  0% { opacity: 1; }
67
  50% { opacity: 0.5; }
68
  100% { opacity: 1; }
69
}
70
 
71
@keyframes border {
72
  0% { border-radius: 100%; }
73
  50% { border-radius: 0%; }
74
  100% { border-radius: 100%; }
75
}
76
 
77
@keyframes rotate {
78
  0% { transform: rotate(0deg); }
79
  100% { transform: rotate(360deg); }
80
}
 

Untitled

CSSDeck G+