SVG Spinner

Scalable, non obtrusive CSS3 Spinner.

HTML

<div style="text-align:center;">
<br/>


<svg version="1.1" 
    id="svg-spinner" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="200px" 
    y="200px"
    viewBox="-10 -10 50 50" 
    xml:space="preserve">

    <path
        id="spinner" 
        fill="#80AAD5" 
       d="M13.1,34.8c-1.2,0-3.3-0.1-4.6-0.7c-2-0.8-3.7-2.5-5-4.9C0.5,23.6,0.3,14.4,3,7.8c1.2-2.9,3.1-5,5.5-6
	c2.3-1,4.9-1.1,7.8-0.5C22.5,2.6,29.4,7.2,33,12.4c1.5,2.1,2.1,3.8,2.1,5.3l0,0c-0.1,4.5-4.8,9.4-9.1,12.4
	c-4.2,2.9-8.5,4.6-12.1,4.7C13.8,34.8,13.5,34.8,13.1,34.8z M13.1,3c-1.4,0-2.6,0.2-3.8,0.7C7.4,4.5,5.9,6.2,4.9,8.6
	c-2.4,5.9-2.2,14.6,0.5,19.7c1,2,2.4,3.3,3.9,3.9c1,0.4,3.1,0.5,4.6,0.5c3.3-0.1,7.2-1.7,11-4.3c4.9-3.4,8.2-7.6,8.2-10.8
	c0-0.7-0.3-1.9-1.7-4c-2.9-4.1-9.1-8.9-15.5-10.3C14.9,3.1,13.9,3,13.1,3z"
    >

        <animateTransform
            attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 18 18"
            to="360 18 18"
            dur="1.5s"
            repeatCount="indefinite"
        />
    </path>
</svg>

</div>

CSS

//#loading    {
    
    background-image: url(http://dl.dropbox.com/u/971295/spinner.svg);
    width: 200px;
    height: 200px;
    background-size: contain;
    position: relative;
    margin: 20px auto;
    opacity: .7;
    -webkit-animation:rotate 1.5s infinite steps(12);
    -moz-animation:rotate 1.5s infinite steps(12);
    -ms-animation:rotate 1.5s infinite steps(12);
    -o-animation:rotate 1.5s infinite steps(12);
    animation:rotate 1.5s infinite steps(12); 
}
@keyframes "rotate" {
 from {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       -ms-transform: rotate(360deg);
       transform: rotate(360deg);
 }

}

@-moz-keyframes rotate {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "rotate" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "rotate" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "rotate" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}
//
#svg-spinner {
  width: 120px;
}