Ajax Loader
HTML 
<html>
1
<html>
2
 <head>
3
  <style>
4
   #loader {
5
    background-color: transparent;
6
  height: 50px;
7
  width: 50px;
8
  margin-top: 200px;
9
  border-radius: 100px;
10
  box-shadow: 0 0 0 transparent;
11
  -webkit-animation: loader 3s linear infinite;
12
  animation: loader 3s linear infinite;
13
   }
14
   @-webkit-keyframes loader {
15
    75% {
16
   background: white;
17
   box-shadow: 50px 50px 50px white, -50px 50px 50px white, 50px -50px 50px white, -50px -50px 50px white, -50px 0px 50px white, 0px -50px 50px white, 50px 0px 50px white, 0px 50px 50px white;
18
  }
19
   }
20
   keyframes loader {
21
    75% {
22
   background: white;
23
   box-shadow: 50px 50px 50px white, -50px 50px 50px white, 50px -50px 50px white, -50px -50px 50px white, -50px 0px 50px white, 0px -50px 50px white, 50px 0px 50px white, 0px 50px 50px white;
24
  }
25
   }
26
   @-moz-keyframes loader {
27
    75% {
28
   background: white;
29
   box-shadow: 50px 50px 50px white, -50px 50px 50px white, 50px -50px 50px white, -50px -50px 50px white, -50px 0px 50px white, 0px -50px 50px white, 50px 0px 50px white, 0px 50px 50px white;
30
  }
31
   }
32
   keyframes loader {
33
    75% {
34
   background: white;
35
   box-shadow: 50px 50px 50px white, -50px 50px 50px white, 50px -50px 50px white, -50px -50px 50px white, -50px 0px 50px white, 0px -50px 50px white, 50px 0px 50px white, 0px 50px 50px white;
36
  }
37
   }
38
  </style>
39
 </head>
40
 <body style="background: #34495E;">
41
  <center>
42
   <div id="loader"></div>
43
  </center>
44
 </body>
45
</html>
 

Multiple Box Shadows

CSSDeck G+