Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="element loading">Loading</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin loading( 
  $width: 50px, 
  $border: 5px, 
  $speed: 2s, 
  $color: gray, 
  $accent: black
) {
  &.loading {
    position: relative;
    opacity: .5;
    
    &:after {
      content: '';
      position: absolute;
      width: $width;
      height: $width;
      border-radius: $width;
      border: $border $color solid;
      border-top-color: $accent;
      top: 50%;
      left: 50%;
      margin-top: ( -$width / 2 - $border );
      margin-left: ( -$width / 2 - $border );
      -webkit-animation: loading $speed linear infinite;
      animation: loading $speed linear infinite;
    }
  }
  
  @-webkit-keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.element {
  margin: 2em auto;
  width: 200px;
  height: 200px;
  background: #eee;
  line-height: 200px;
  text-align: center;
  transition: opacity;
  
  @include loading( 60px, 8px, 3s, gray, black );
}

SassMeister-output.css

.element {
  margin: 2em auto;
  width: 200px;
  height: 200px;
  background: #eee;
  line-height: 200px;
  text-align: center;
  transition: opacity;
}
.element.loading {
  position: relative;
  opacity: .5;
}
.element.loading:after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  border: 8px gray solid;
  border-top-color: black;
  top: 50%;
  left: 50%;
  margin-top: -38px;
  margin-left: -38px;
  -webkit-animation: loading 3s linear infinite;
  animation: loading 3s linear infinite;
}
@-webkit-keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

SassMeister-rendered.html

<div class="element loading">Loading</div>