Skip to content

Instantly share code, notes, and snippets.

@steveinatorx
Created March 23, 2015 23:50
Show Gist options
  • Save steveinatorx/a197cdddb4ff9db35a84 to your computer and use it in GitHub Desktop.
Save steveinatorx/a197cdddb4ff9db35a84 to your computer and use it in GitHub Desktop.
a simple inline loading animation as an angular directive
#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>
@steveinatorx
Copy link
Author

http://jsbin.com/culecamiro/1
monkey with the css to get different colors or sizes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment