Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container loading ">
  <div class="octagon-icon">
    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.4 43.2">
      <path id="outline-small" display="none" fill="none" stroke="#ffffff" stroke-width="1.9512" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
  M73.8,0.9c3.1,0,5.6,2.5,5.6,5.6v30.1c0,3.1-2.5,5.6-5.6,5.6H41.6c-3.1,0-5.6-2.5-5.6-5.6V6.5c0-3.1,2.5-5.6,5.6-5.6H73.8z"></path>
      <g class="icon icon-loading" transform="translate(50%,50%)">
        <path d="M67.7,21.9C67.7,22,67.7,22,67.7,21.9c-0.6,2.5-1.8,4.5-3.6,6c-1.8,1.5-4,2.3-6.5,2.3c-1.3,0-2.6-0.2-3.8-0.7
    c-1.2-0.5-2.3-1.2-3.3-2.1L48.8,29c-0.2,0.2-0.4,0.3-0.6,0.3c-0.2,0-0.4-0.1-0.6-0.3c-0.2-0.2-0.3-0.4-0.3-0.6v-6.1
    c0-0.2,0.1-0.4,0.3-0.6c0.2-0.2,0.4-0.3,0.6-0.3h6.1c0.2,0,0.4,0.1,0.6,0.3c0.2,0.2,0.3,0.4,0.3,0.6S55,22.8,54.9,23L53,24.8
    c0.6,0.6,1.4,1.1,2.2,1.4s1.7,0.5,2.5,0.5c1.2,0,2.3-0.3,3.4-0.9s1.9-1.4,2.5-2.4c0.1-0.2,0.3-0.7,0.7-1.6c0.1-0.2,0.2-0.3,0.4-0.3
    h2.6c0.1,0,0.2,0,0.3,0.1C67.7,21.7,67.7,21.8,67.7,21.9z M68.1,11.1v6.1c0,0.2-0.1,0.4-0.3,0.6C67.7,18,67.5,18,67.2,18h-6.1
    c-0.2,0-0.4-0.1-0.6-0.3c-0.2-0.2-0.3-0.4-0.3-0.6s0.1-0.4,0.3-0.6l1.9-1.9c-1.3-1.2-2.9-1.9-4.7-1.9c-1.2,0-2.3,0.3-3.4,0.9
    c-1,0.6-1.9,1.4-2.5,2.4c-0.1,0.2-0.3,0.7-0.7,1.6C51,17.9,50.9,18,50.7,18H48c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.2-0.1-0.3v-0.1
    c0.6-2.4,1.8-4.4,3.6-5.9c1.8-1.5,4-2.2,6.5-2.2c1.3,0,2.6,0.2,3.8,0.8s2.3,1.2,3.3,2.1l1.8-1.7c0.2-0.2,0.4-0.3,0.6-0.3
    s0.4,0.1,0.6,0.3C68,10.7,68.1,10.9,68.1,11.1z"></path>
      </g>
    </svg>
  </div>
</div>

<div class="test"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Bourbon (v4.0.2)
// ----

@import "bourbon/bourbon";  

body {
  background-color: #999;
}

$c-paper-white: #fff;
/*------------------------------------------------*\
Octagon Icon
\*------------------------------------------------*/

@include keyframes(spin) {
  0% {
    opacity: 0;
   @include transform(rotate(0deg));
   @include transform-origin(50%);
  }
  100% {
    opacity: 1;
    @include transform(rotate(360deg));
    @include transform-origin(50%);
  }
}

#outline-small {
  @include animation(spin 1.0s linear infinite);
}

.octagon-icon {

	height: auto;
	width: 200px;

	svg {
    fill: $c-paper-white;
	  height: 100%;
	  width: 100%;
	}
  
  .icon {
    display: none;
  }
  #outline-small {
    display: none;
  }
	
	.icon-camera {
		display: block;
	}
  .icon-loading {
    position: relative;
    
    position: relative;
    @include animation(spin 1.0s linear infinite);
  }
  .icon-success {}
  .icon-error {}

  .loading &,
  .success &,
  .error & {
  	.icon-camera {
  		display: none;
  	}
    #outline-small {
      display: block;
    }
  }

  .loading & {
  	.icon-loading {
  		display: block;
  	}


  }
  .success & {
  	.icon-success {
  		display: block;
  	}
  }
  .error & {
  	.icon-error {
  		display: block;
  	}
  }

  @media screen and (max-width: 400px) {
    height: 100px;
  }
}

.test {
  background-color: #fff;
  height: 100px;
  width: 100px;
  @include animation(spin 1.0s linear infinite);

}

SassMeister-output.css

body {
  background-color: #999;
}

/*------------------------------------------------*\
Octagon Icon
\*------------------------------------------------*/
@-webkit-keyframes spin {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50%;
  }

  100% {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: 50%;
  }
}
@-moz-keyframes spin {
  0% {
    opacity: 0;
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50%;
  }

  100% {
    opacity: 1;
    -moz-transform: rotate(360deg);
    -moz-transform-origin: 50%;
  }
}
@keyframes spin {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
  }

  100% {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
  }
}
#outline-small {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.octagon-icon {
  height: auto;
  width: 200px;
}
.octagon-icon svg {
  fill: white;
  height: 100%;
  width: 100%;
}
.octagon-icon .icon {
  display: none;
}
.octagon-icon #outline-small {
  display: none;
}
.octagon-icon .icon-camera {
  display: block;
}
.octagon-icon .icon-loading {
  position: relative;
  position: relative;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
.loading .octagon-icon .icon-camera, .success .octagon-icon .icon-camera, .error .octagon-icon .icon-camera {
  display: none;
}
.loading .octagon-icon #outline-small, .success .octagon-icon #outline-small, .error .octagon-icon #outline-small {
  display: block;
}
.loading .octagon-icon .icon-loading {
  display: block;
}
.success .octagon-icon .icon-success {
  display: block;
}
.error .octagon-icon .icon-error {
  display: block;
}
@media screen and (max-width: 400px) {
  .octagon-icon {
    height: 100px;
  }
}

.test {
  background-color: #fff;
  height: 100px;
  width: 100px;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

SassMeister-rendered.html

<div class="container loading ">
  <div class="octagon-icon">
    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.4 43.2">
      <path id="outline-small" display="none" fill="none" stroke="#ffffff" stroke-width="1.9512" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
  M73.8,0.9c3.1,0,5.6,2.5,5.6,5.6v30.1c0,3.1-2.5,5.6-5.6,5.6H41.6c-3.1,0-5.6-2.5-5.6-5.6V6.5c0-3.1,2.5-5.6,5.6-5.6H73.8z"></path>
      <g class="icon icon-loading" transform="translate(50%,50%)">
        <path d="M67.7,21.9C67.7,22,67.7,22,67.7,21.9c-0.6,2.5-1.8,4.5-3.6,6c-1.8,1.5-4,2.3-6.5,2.3c-1.3,0-2.6-0.2-3.8-0.7
    c-1.2-0.5-2.3-1.2-3.3-2.1L48.8,29c-0.2,0.2-0.4,0.3-0.6,0.3c-0.2,0-0.4-0.1-0.6-0.3c-0.2-0.2-0.3-0.4-0.3-0.6v-6.1
    c0-0.2,0.1-0.4,0.3-0.6c0.2-0.2,0.4-0.3,0.6-0.3h6.1c0.2,0,0.4,0.1,0.6,0.3c0.2,0.2,0.3,0.4,0.3,0.6S55,22.8,54.9,23L53,24.8
    c0.6,0.6,1.4,1.1,2.2,1.4s1.7,0.5,2.5,0.5c1.2,0,2.3-0.3,3.4-0.9s1.9-1.4,2.5-2.4c0.1-0.2,0.3-0.7,0.7-1.6c0.1-0.2,0.2-0.3,0.4-0.3
    h2.6c0.1,0,0.2,0,0.3,0.1C67.7,21.7,67.7,21.8,67.7,21.9z M68.1,11.1v6.1c0,0.2-0.1,0.4-0.3,0.6C67.7,18,67.5,18,67.2,18h-6.1
    c-0.2,0-0.4-0.1-0.6-0.3c-0.2-0.2-0.3-0.4-0.3-0.6s0.1-0.4,0.3-0.6l1.9-1.9c-1.3-1.2-2.9-1.9-4.7-1.9c-1.2,0-2.3,0.3-3.4,0.9
    c-1,0.6-1.9,1.4-2.5,2.4c-0.1,0.2-0.3,0.7-0.7,1.6C51,17.9,50.9,18,50.7,18H48c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.2-0.1-0.3v-0.1
    c0.6-2.4,1.8-4.4,3.6-5.9c1.8-1.5,4-2.2,6.5-2.2c1.3,0,2.6,0.2,3.8,0.8s2.3,1.2,3.3,2.1l1.8-1.7c0.2-0.2,0.4-0.3,0.6-0.3
    s0.4,0.1,0.6,0.3C68,10.7,68.1,10.9,68.1,11.1z"></path>
      </g>
    </svg>
  </div>
</div>

<div class="test"></div>