Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@import "compass";


@mixin animation-loading-two-colors ( $color-a, $color-b, $number-of-items: 5) {
  
  $delay: 100ms;
  $max-items: $number-of-items - 1;
  $step-progress: 100 / $number-of-items;
  
  %animation-loading-basic {
  		display: inline-block;
  		vertical-align: middle;
  		width: 1em;
  		height: 1em;
  		margin: .2em;
  		@include border-radius(100%);
  }

	span {
	  @extend %animation-loading-basic;
	  
		-webkit-animation:loading $number-of-items*$delay infinite alternate;
		animation: loading $number-of-items*$delay infinite alternate;

    
    @for $i from 1 through ($number-of-items){
  		&:nth-of-type(#{$i}) {
  		  @include animation-delay($delay*($i - 1));
  			background: mix( $color-a, $color-b, 100-$step-progress*($i - 1));
  		}
    }
	}
}

@include keyframes (loading) {
	0% {
		@include transform( scale(1.3) );
		opacity: 1;
	}
	100% {
		@include transform( scale(1) );
		opacity: 0.5;
	}
}

SassMeister-output.css

@-moz-keyframes loading {
  0% {
    -moz-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}
@-webkit-keyframes loading {
  0% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}
@keyframes loading {
  0% {
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
}