Created
March 23, 2015 23:50
-
-
Save steveinatorx/a197cdddb4ff9db35a84 to your computer and use it in GitHub Desktop.
a simple inline loading animation as an angular directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) { | |
| } | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://jsbin.com/culecamiro/1
monkey with the css to get different colors or sizes.