"Spinning wheels" - Animated spinner with SVG and Sass-CSS
I totaly refactored your code (CSS and HTML). I wont address all the modifications and focus on the main ones :

Browser support

The is an issue in firefox when a percentage transform-origin is set on an svg element.If you test your code in FFF, you will see the circles are rotating around the center of the SVG element.
To get around this, I put each circle in a seperate svg element and set the rotation on the svg element itself.

Horizontal and vertical centering

I changed the absolute positionning technique to flexbox as it is more flexible espacialy as you plan on making this responsive.

Responsive

I use the first svg to set the size of the .wrap element. The other ones adapt their size according to the first one with absolute positioning and percentage sizes.

I also tidied up the code 


remove positioning on the circle element
removed the z-index as the layers are set with the order of the elements in the markup




html, body { height: 100%; }
body { 
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #efefef; 
}
.wrap{
  position:relative;
  width:100%;
  max-width:500px;
  overflow:hidden;
  padding:10% 0;
 }
svg {
  width: 70%;
  height:auto;
  position: absolute;
  animation: turn-circle 5s linear infinite;
  fill: transparent;
  stroke-width: 50;
  stroke-dasharray: 31.5;
}
svg:nth-of-type(1){
  position:static;
  margin:-15% 0 0 -5%;
  stroke: #00aadd;
}
svg:nth-of-type(2) {
  stroke: #00ab02;
  top:0;
  right:-5%;
  animation-duration:4s;
}
svg:nth-of-type(3) {
  stroke: #0053FF;
  top:20%; left:15%;
  animation-duration:3s;
}
@keyframes turn-circle {
  to { -weblit-transform: rotate3d(0,0,1,360deg);
               transform: rotate3d(0,0,1,360deg);}
}
&lt;div class="wrap"&gt;
  &lt;svg version="1.1" viewbox="0 0 300 300"&gt;
    &lt;circle cx="150" cy="150" r="100" /&gt;
  &lt;/svg&gt;
  &lt;svg version="1.1" viewbox="0 0 300 300"&gt;
    &lt;circle cx="150" cy="150" r="100" /&gt;
  &lt;/svg&gt;
  &lt;svg version="1.1" viewbox="0 0 300 300"&gt;
    &lt;circle cx="150" cy="150" r="100" /&gt;
  &lt;/svg&gt;  
&lt;/div&gt;