SVG: Spinner

spinner.css

#loading    {
    background-image: url(./spinner.svg);
    width: 20px;
    height: 20px;
    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);
 }

}

spinner.html

<div id="loading"></div>

spinner.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g id="_x31_6x16_Spinner.psd" display="none">
	<defs>
		<rect id="SVGID_1_" width="128" height="128"/>
	</defs>
	<clipPath id="SVGID_2_" display="inline">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<g display="inline" clip-path="url(#SVGID_2_)">
		
			<image overflow="visible" width="16" height="16" id="Layer_1_1_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAFiAAABYgFfJ9BTAAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWVJREFUeNqM098rQ3EYx/Fzdhgh
bcWW/GiKxKK2SKTcrP0PuFP+ABf+AP+Cf8OVe5dquMEVlgsZkhiFIys/3t/6HH2ds+GpV+1s5zzP
s+f5HseJRsz6XMQmPOef0YMNZHW9ghslaFbCoUbVTHxgFmu6bkUN70qawrP9gGdVbsMtrrCMYwwg
hx2M4RRlddMF31MXq1jCo27Oq5ttXffjBbvoxhxGcOaqgwwWMKUK60rwZnUaU+JhVHGkbn/EJBbr
zCaIrCp/h+mggDQ+NawSLhokaMc44nrWb9IwUkpQ+2PnprNOtChBpNNeTOjHepHRPZE1mn1PY0br
LGuI4cirgOniwXTsqlpR6zG7P9H/fMK5iiR1AktaaU7z2vKsYQaHJKl1VtCHUVyrsq8CFZ3IuyBB
VV+Y6c7jFXsYRAL76FCySx24ezP48BQTmvCBthIT0+GhEqd/extdDdQeWsHaSjy85i8BBgAjbUmT
DlLqrAAAAABJRU5ErkJggg==" transform="matrix(8 0 0 8 0 0)">
		</image>
	</g>
</g>
<line fill="none" stroke="#363636" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="64.001" y1="8.125" x2="64.001" y2="27.762"/>
<line fill="none" stroke="#484848" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="36.062" y1="15.611" x2="45.88" y2="32.618"/>
<line fill="none" stroke="#5A5A5A" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="15.611" y1="36.062" x2="32.618" y2="45.882"/>
<line fill="none" stroke="#6C6C6C" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="8.126" y1="64" x2="27.764" y2="64"/>
<line fill="none" stroke="#7E7E7E" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="15.612" y1="91.938" x2="32.619" y2="82.117"/>
<line fill="none" stroke="#909090" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="36.064" y1="112.389" x2="45.883" y2="95.381"/>
<line fill="none" stroke="#A2A2A2" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="64.001" y1="119.873" x2="64.001" y2="100.237"/>
<line fill="none" stroke="#B4B4B4" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="91.939" y1="112.387" x2="82.121" y2="95.381"/>
<line fill="none" stroke="#C6C6C6" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="112.391" y1="91.935" x2="95.386" y2="82.116"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="119.875" y1="63.997" x2="100.241" y2="63.998"/>
<line fill="none" stroke="#121212" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="112.389" y1="36.06" x2="95.384" y2="45.877"/>
<line fill="none" stroke="#242424" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="91.937" y1="15.609" x2="82.118" y2="32.614"/>
</svg>