Ajax Loader
HTML 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="45 30 730 520" >
1
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="45 30 730 520" >
2
  <style>
3
    #rings circle{
4
      fill:none;
5
      stroke:rgb(31, 117, 173);
6
      stroke-width: 0.5;
7
    }
8
    .boxes{
9
       fill: #fff;
10
       stroke-width: 3;
11
       stroke: #2489bb;
12
    }
13
  </style>
14
  <defs>
15
    <pattern xlink:href="#rings-1" id="pattern3012" patternTransform="matrix(0.895,0,0,1.00,35.24,6.24)"/>
16
    <pattern id="rings-1" x="30" y="30" width="110" height="110" patternUnits="userSpaceOnUse">
17
      <g id="rings">
18
        <circle  cx="55" cy="55" r="52.5"/>
19
        <circle  cx="55" cy="55" r="50"/>
20
        <circle  cx="55" cy="55" r="47.5"/>
21
        <circle  cx="55" cy="55" r="45"/>
22
        <circle  cx="55" cy="55" r="42.5"/>
23
        <circle  cx="55" cy="55" r="40"/>
24
        <circle  cx="55" cy="55" r="37.5"/>
25
        <circle  cx="55" cy="55" r="35"/>
26
        <circle  cx="55" cy="55" r="32.5"/>
27
        <circle  cx="55" cy="55" r="30"/>
28
      </g>
29
    </pattern>
30
  </defs>
31
32
  <rect x="62.3" y="36.3" width="688.2" height="441.8" id="rect3003" fill="url(#pattern3012)"/>
33
34
  <g id="contentbox" transform="translate(34.6,4.7)">
35
  
36
    <rect id="outerbox" class="boxes" x="50" y="50" width="640" height="400" />
37
    <rect id="innerbox" class="boxes" x="56" y="56" width="628" height="388" />
38
  
39
  </g>
40
</svg>
 

SVG patterns experiment

CSSDeck G+