Ajax Loader
HTML 
<p>The Thing</p>
1
<p>The Thing</p>
2
 
3
<div class="one"></div>
4
<div class="two"></div>
5
<div class="three"></div>
6
<div class="four"></div>
7
<div class="five"></div>
8
<div class="six"></div>
9
 
10
 
11
 
 
CSS 
body {
1
body {
2
  font-size: 50px;
3
  text-align: center;
4
  padding: 50px;
5
}
6
 
7
div {
8
  position: absolute;
9
  left: 50%;
10
  width: 50px;
11
  height: 200px;
12
  opacity: 0.25;
13
  -webkit-animation: whoosh 0.6s infinite;
14
}
15
 
16
.one {background-color: #000;-webkit-transform:rotate(30deg);animation-delay: 0.1s;}
17
.two {background-color: #000;-webkit-transform:rotate(60deg);animation-delay: 0.2s;}
18
.three {background-color: #000;-webkit-transform:rotate(90deg);animation-delay: 0.3s;}
19
.four {background-color: #000;-webkit-transform:rotate(120deg);animation-delay: 0.4s;}
20
.five {background-color: #000;-webkit-transform:rotate(150deg);animation-delay: 0.5s;}
21
.six {background-color: #000;-webkit-transform:rotate(180deg);animation-delay: 0.6s;}
22
 
23
@-webkit-keyframes whoosh {
24
  0%, 100%  {}
25
  50% {-webkit-border-radius: 50px;
26
      border-radius: 50px;
27
      opacity:0.3;
28
  }
29
}
30
 
 

The Thing

CSSDeck G+