steveinatorx/app.css

## app.css
#fadingBarsG{
position:relative;
width:100px;
height:12px;
display:inline-block;
}

.fadingBarsG{
position:absolute;
top:0;
background-color:#00FF00;
width:12px;
height:12px;
-moz-animation-name:bounce_fadingBarsG;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_fadingBarsG;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_fadingBarsG;
-ms-animation-duration:2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-ms-transform:scale(.3);
-o-animation-name:bounce_fadingBarsG;
-o-animation-duration:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
-o-transform:scale(.3);
animation-name:bounce_fadingBarsG;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:normal;
transform:scale(.3);
}

#fadingBarsG_1{
left:0;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}

#fadingBarsG_2{
left:13px;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}

#fadingBarsG_3{
left:25px;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s;
}

#fadingBarsG_4{
left:38px;
-moz-animation-delay:1.4s;
-webkit-animation-delay:1.4s;
-ms-animation-delay:1.4s;
-o-animation-delay:1.4s;
animation-delay:1.4s;
}

#fadingBarsG_5{
left:50px;
-moz-animation-delay:1.6s;
-webkit-animation-delay:1.6s;
-ms-animation-delay:1.6s;
-o-animation-delay:1.6s;
animation-delay:1.6s;
}

#fadingBarsG_6{
left:63px;
-moz-animation-delay:1.8s;
-webkit-animation-delay:1.8s;
-ms-animation-delay:1.8s;
-o-animation-delay:1.8s;
animation-delay:1.8s;
}

#fadingBarsG_7{
left:75px;
-moz-animation-delay:2s;
-webkit-animation-delay:2s;
-ms-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}

#fadingBarsG_8{
left:88px;
-moz-animation-delay:2.2s;
-webkit-animation-delay:2.2s;
-ms-animation-delay:2.2s;
-o-animation-delay:2.2s;
animation-delay:2.2s;
}

@-moz-keyframes bounce_fadingBarsG{
0%{
-moz-transform:scale(1);
background-color:#00FF00;
}

100%{
-moz-transform:scale(.3);
background-color:#000000;
}

}

@-webkit-keyframes bounce_fadingBarsG{
0%{
-webkit-transform:scale(1);
background-color:#00FF00;
}

100%{
-webkit-transform:scale(.3);
background-color:#000000;
}

}

@-ms-keyframes bounce_fadingBarsG{
0%{
-ms-transform:scale(1);
background-color:#00FF00;
}

100%{
-ms-transform:scale(.3);
background-color:#000000;
}

}

@-o-keyframes bounce_fadingBarsG{
0%{
-o-transform:scale(1);
background-color:#00FF00;
}

100%{
-o-transform:scale(.3);
background-color:#000000;
}

}

@keyframes bounce_fadingBarsG{
0%{
transform:scale(1);
background-color:#00FF00;
}

100%{
transform:scale(.3);
background-color:#000000;
}

}

## app.js
angular.module('demo', [])
    .directive('loadAnimation', function () {
    return {
      template: '<div id="fadingBarsG"><div id="fadingBarsG_1" class="fadingBarsG"> </div> <div id="fadingBarsG_2" class="fadingBarsG"> </div> <div id="fadingBarsG_3" class="fadingBarsG"> </div> <div id="fadingBarsG_4" class="fadingBarsG"> </div> <div id="fadingBarsG_5" class="fadingBarsG"> </div> <div id="fadingBarsG_6" class="fadingBarsG"> </div> <div id="fadingBarsG_7" class="fadingBarsG"> </div> <div id="fadingBarsG_8" class="fadingBarsG"> </div></div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
      }
    };
  });

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Simple inline loading animation angular directive</title>
</head>
<body ng-app="demo">

    im a simple inline loading animation: <load-animation/>

</body>
</html>
	#fadingBarsG{
	position:relative;
	width:100px;
	height:12px;
	display:inline-block;
	}

	.fadingBarsG{
	position:absolute;
	top:0;
	background-color:#00FF00;
	width:12px;
	height:12px;
	-moz-animation-name:bounce_fadingBarsG;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:normal;
	-moz-transform:scale(.3);
	-webkit-animation-name:bounce_fadingBarsG;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-transform:scale(.3);
	-ms-animation-name:bounce_fadingBarsG;
	-ms-animation-duration:2s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:normal;
	-ms-transform:scale(.3);
	-o-animation-name:bounce_fadingBarsG;
	-o-animation-duration:2s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:normal;
	-o-transform:scale(.3);
	animation-name:bounce_fadingBarsG;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	transform:scale(.3);
	}

	#fadingBarsG_1{
	left:0;
	-moz-animation-delay:0.8s;
	-webkit-animation-delay:0.8s;
	-ms-animation-delay:0.8s;
	-o-animation-delay:0.8s;
	animation-delay:0.8s;
	}

	#fadingBarsG_2{
	left:13px;
	-moz-animation-delay:1s;
	-webkit-animation-delay:1s;
	-ms-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:1s;
	}

	#fadingBarsG_3{
	left:25px;
	-moz-animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
	-ms-animation-delay:1.2s;
	-o-animation-delay:1.2s;
	animation-delay:1.2s;
	}

	#fadingBarsG_4{
	left:38px;
	-moz-animation-delay:1.4s;
	-webkit-animation-delay:1.4s;
	-ms-animation-delay:1.4s;
	-o-animation-delay:1.4s;
	animation-delay:1.4s;
	}

	#fadingBarsG_5{
	left:50px;
	-moz-animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
	-ms-animation-delay:1.6s;
	-o-animation-delay:1.6s;
	animation-delay:1.6s;
	}

	#fadingBarsG_6{
	left:63px;
	-moz-animation-delay:1.8s;
	-webkit-animation-delay:1.8s;
	-ms-animation-delay:1.8s;
	-o-animation-delay:1.8s;
	animation-delay:1.8s;
	}

	#fadingBarsG_7{
	left:75px;
	-moz-animation-delay:2s;
	-webkit-animation-delay:2s;
	-ms-animation-delay:2s;
	-o-animation-delay:2s;
	animation-delay:2s;
	}

	#fadingBarsG_8{
	left:88px;
	-moz-animation-delay:2.2s;
	-webkit-animation-delay:2.2s;
	-ms-animation-delay:2.2s;
	-o-animation-delay:2.2s;
	animation-delay:2.2s;
	}

	@-moz-keyframes bounce_fadingBarsG{
	0%{
	-moz-transform:scale(1);
	background-color:#00FF00;
	}

	100%{
	-moz-transform:scale(.3);
	background-color:#000000;
	}

	}

	@-webkit-keyframes bounce_fadingBarsG{
	0%{
	-webkit-transform:scale(1);
	background-color:#00FF00;
	}

	100%{
	-webkit-transform:scale(.3);
	background-color:#000000;
	}

	}

	@-ms-keyframes bounce_fadingBarsG{
	0%{
	-ms-transform:scale(1);
	background-color:#00FF00;
	}

	100%{
	-ms-transform:scale(.3);
	background-color:#000000;
	}

	}

	@-o-keyframes bounce_fadingBarsG{
	0%{
	-o-transform:scale(1);
	background-color:#00FF00;
	}

	100%{
	-o-transform:scale(.3);
	background-color:#000000;
	}

	}

	@keyframes bounce_fadingBarsG{
	0%{
	transform:scale(1);
	background-color:#00FF00;
	}

	100%{
	transform:scale(.3);
	background-color:#000000;
	}

	}
	angular.module('demo', [])
	.directive('loadAnimation', function () {
	return {
	template: '<div id="fadingBarsG"><div id="fadingBarsG_1" class="fadingBarsG"> </div> <div id="fadingBarsG_2" class="fadingBarsG"> </div> <div id="fadingBarsG_3" class="fadingBarsG"> </div> <div id="fadingBarsG_4" class="fadingBarsG"> </div> <div id="fadingBarsG_5" class="fadingBarsG"> </div> <div id="fadingBarsG_6" class="fadingBarsG"> </div> <div id="fadingBarsG_7" class="fadingBarsG"> </div> <div id="fadingBarsG_8" class="fadingBarsG"> </div></div>',
	restrict: 'E',
	link: function postLink(scope, element, attrs) {
	}
	};
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<meta charset="utf-8">
	<title>Simple inline loading animation angular directive</title>
	</head>
	<body ng-app="demo">

	im a simple inline loading animation: <load-animation/>

	</body>
	</html>