SVG Loading Spinner

spinner.html

<div class="loader"></div>

spinner.sass

/**
 * Loading spinner
 */

@include keyframes(spin)
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

.loader
  background: url(assets/spinner.png) center no-repeat
  background-size: 60px 60px
  width: 60px
  height: 60px
  animation: spin 1s infinite linear
  transform-origin: 50% 50%

  &.centre
    position: absolute
    top: 50%
    left: 50%
    margin-left: -25px
    margin-top: -25px

spinner.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, 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="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="25" y1="22.126" x2="25" y2="0.001"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="24.017" y1="22.299" x2="16.449" y2="1.509"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="23.151" y1="22.798" x2="8.93" y2="5.85"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="22.509" y1="23.563" x2="3.349" y2="12.501"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="22.168" y1="24.502" x2="0.379" y2="20.66"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="22.168" y1="25.501" x2="0.379" y2="29.343"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="22.51" y1="26.439" x2="3.349" y2="37.502"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="23.152" y1="27.204" x2="8.93" y2="44.153"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="24.017" y1="27.703" x2="16.449" y2="48.494"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="25" y1="27.876" x2="25" y2="50.002"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="25.983" y1="27.703" x2="33.551" y2="48.494"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="26.848" y1="27.204" x2="41.07" y2="44.153"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="27.49" y1="26.438" x2="46.651" y2="37.502"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="27.832" y1="25.5" x2="49.621" y2="29.343"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="27.832" y1="24.502" x2="49.621" y2="20.66"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="27.49" y1="23.563" x2="46.651" y2="12.501"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="26.848" y1="22.799" x2="41.07" y2="5.85"/>
<line fill="none" stroke="#BEBEBE" stroke-miterlimit="10" x1="25.983" y1="22.299" x2="33.551" y2="1.508"/>
</svg>