.#{$namespace}loading{
    .#{$namespace}spinner{
        margin: 0 auto;
        display: block;
    } 
}
.#{$namespace}spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: spinner-spin 1s step-end infinite;
  animation: spinner-spin 1s step-end infinite;
}
.#{$namespace}spinner:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.#{$namespace}spinner-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
}
@-webkit-keyframes spinner-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  8.33333333% {
    -webkit-transform: rotate(30deg);
  }
  16.66666667% {
    -webkit-transform: rotate(60deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  33.33333333% {
    -webkit-transform: rotate(120deg);
  }
  41.66666667% {
    -webkit-transform: rotate(150deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  58.33333333% {
    -webkit-transform: rotate(210deg);
  }
  66.66666667% {
    -webkit-transform: rotate(240deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  83.33333333% {
    -webkit-transform: rotate(300deg);
  }
  91.66666667% {
    -webkit-transform: rotate(330deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spinner-spin {
  0% {
    transform: rotate(0deg);
  }
  8.33333333% {
    transform: rotate(30deg);
  }
  16.66666667% {
    transform: rotate(60deg);
  }
  25% {
    transform: rotate(90deg);
  }
  33.33333333% {
    transform: rotate(120deg);
  }
  41.66666667% {
    transform: rotate(150deg);
  }
  50% {
    transform: rotate(180deg);
  }
  58.33333333% {
    transform: rotate(210deg);
  }
  66.66666667% {
    transform: rotate(240deg);
  }
  75% {
    transform: rotate(270deg);
  }
  83.33333333% {
    transform: rotate(300deg);
  }
  91.66666667% {
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(360deg);
  }
}