Loading Animation for only CSS

loader.html

<div id="loading-wrapper">

<span id="bounce1" class="loading-bounce"></span>
<span id="bounce2" class="loading-bounce"></span>
<span id="bounce3" class="loading-bounce"></span>
<span id="bounce4" class="loading-bounce"></span>
<span id="bounce5" class="loading-bounce"></span>
<span id="bounce6" class="loading-bounce"></span>
<span id="bounce7" class="loading-bounce"></span>
<span id="bounce8" class="loading-bounce"></span>

<!-- /#loading-wrapper --></div>

loader.scss

//==========[[[Variable]]]==========
$loading-size: 60px;
$loading-duration: 1.04;
$loading-delay: ($loading-duration / 8);
$lite-color: #1655B4;
$bold-color: #91B3E7;

//==========[[[Mixin]]]==========
@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	}
}

@mixin animation-name($name) {
	-webkit-animation-name: $name;
	animation-name: $name;
}

@mixin animation-duration($time) {
	-webkit-animation-duration: $time + s;
	animation-duration: $time + s;
}

@mixin animation-iteration-count($count) {
	-webkit-animation-iteration-count: $count;
	animation-iteration-count: $count;
}

@mixin animation-direction($direction) {
	-webkit-animation-direction: $direction;
	animation-direction: $direction;
}

@mixin animation-delay($time, $num) {
	-webkit-animation-delay: $time - ($loading-delay * $num) + s;
	animation-delay: $time - ($loading-delay * $num) + s;
}

//==========[[[Defined Style]]]==========
@include keyframes(loading) {
	0% {
		background-color: $lite-color;
	}
	100% {
		background-color: $bold-color;
	}
}

#loading-wrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 9999;
   width: $loading-size;
   height: $loading-size;
   margin-top: -1 * ($loading-size / 2);
   margin-left:  -1 * ($loading-size / 2);
}


.loading-bounce {
   display: block;
   position: absolute;
   width: $loading-size / 5;
   height: $loading-size / 5;
   background-color: $bold-color;
   border-radius: ($loading-size / 5) / 2;
   @include animation-name(loading);
   @include animation-duration($loading-duration);
   @include animation-iteration-count(infinite);
   @include animation-direction(linear);
}

#bounce1 {
   top: 0px;
   left: 50%;
   margin-left: -1 * ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 5)
}

#bounce2 {
   top: ($loading-size / 5)/ 2;
   right: ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 4);
}

#bounce3 {
   top: 50%;
   right: 0;
   margin-top: -1 * ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 3);
}

#bounce4 {
   top: (($loading-size / 5)/ 2) * 7;
    right: ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 2);
}

#bounce5 {
   bottom: 0;
   left: 50%;
   margin-left: -1 * ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 1);
}

#bounce6 {
   top: (($loading-size / 5)/ 2) * 7;
   left: ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, 0);
}

#bounce7 {
   top: 50%;
   left: 0;
   margin-top: -1 * ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, -1);
}

#bounce8 {
   top: ($loading-size / 5)/ 2;
   left: ($loading-size / 5)/ 2;
   @include animation-delay($loading-duration, -2);
}