Last active
May 21, 2020 11:13
-
-
Save revolunet/4678995 to your computer and use it in GitHub Desktop.
AngularJS ngLoading directive. show a loader based on an attribute and restore content when ready.
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 ng-app > | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <title>ngLoading demo</title> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="ngLoading.js"></script> | |
| </head> | |
| <body> | |
| <h1>ngLoading demo</h1> | |
| <div ng-loading="checked">loading? <b>{{ !!checked }}</b></div> | |
| <input type="checkbox" ng-model="checked"> | |
| </body> | |
| </html> |
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
| .loading-circles{ | |
| margin: auto; | |
| position:relative; | |
| width:64px; | |
| height:64px; | |
| -webkit-transform:scale(0.6); | |
| transform:scale(0.6); | |
| } | |
| .loading-circle{ | |
| position:absolute; | |
| background-color:#FFFFFF; | |
| height:12px; | |
| width:12px; | |
| -webkit-border-radius:6px; | |
| -webkit-animation-name:circle-fader; | |
| -webkit-animation-duration:0.72s; | |
| -webkit-animation-iteration-count:infinite; | |
| -webkit-animation-direction:linear; | |
| border-radius:6px; | |
| animation-name:circle-fader; | |
| animation-duration:0.72s; | |
| animation-iteration-count:infinite; | |
| animation-direction:linear; | |
| } | |
| .loading-circle:nth-of-type(1) { | |
| left:0; | |
| top:26px; | |
| -webkit-animation-delay:0.27s; | |
| animation-delay:0.27s; | |
| } | |
| .loading-circle:nth-of-type(2) { | |
| left:8px; | |
| top:8px; | |
| -webkit-animation-delay:0.36s; | |
| animation-delay:0.36s; | |
| } | |
| .loading-circle:nth-of-type(3) { | |
| left:26px; | |
| top:0; | |
| -webkit-animation-delay:0.45s; | |
| animation-delay:0.45s; | |
| } | |
| .loading-circle:nth-of-type(4) { | |
| right:8px; | |
| top:8px; | |
| -webkit-animation-delay:0.54s; | |
| animation-delay:0.54s; | |
| } | |
| .loading-circle:nth-of-type(5) { | |
| right:0; | |
| top:26px; | |
| -webkit-animation-delay:0.63s; | |
| animation-delay:0.63s; | |
| } | |
| .loading-circle:nth-of-type(6) { | |
| right:8px; | |
| bottom:8px; | |
| -webkit-animation-delay:0.72s; | |
| animation-delay:0.72s; | |
| } | |
| .loading-circle:nth-of-type(7) { | |
| left:26px; | |
| bottom:0; | |
| -webkit-animation-delay:0.81s; | |
| animation-delay:0.81s; | |
| } | |
| .loading-circle:nth-of-type(8) { | |
| left:8px; | |
| bottom:8px; | |
| -webkit-animation-delay:0.9s; | |
| animation-delay:0.9s; | |
| } | |
| @-webkit-keyframes circle-fader{ | |
| 0%{background-color:#000000} | |
| 100%{background-color:#FFFFFF} | |
| } | |
| @keyframes circle-fader{ | |
| 0%{background-color:#000000} | |
| 100%{background-color:#FFFFFF} | |
| } |
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.directive('ngLoading', ['$compile', function($compile) { | |
| return { | |
| restrict: 'A', | |
| scope: false, | |
| link: function(scope, element, attrs) { | |
| // 'record' the initial div contents | |
| var initialContents = element.html(); | |
| scope.$watch(attrs.ngLoading, function (loading) { | |
| if (loading===true) { | |
| element.html('<div class="loading-circles">' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '<div class="loading-circle"></div>' + | |
| '</div>'); | |
| } else { | |
| // HERE I WANT TO RESTORE THE ORIGINAL CONTENT | |
| element.html(initialContents); | |
| $compile(element.contents())(scope); | |
| } | |
| }); | |
| } | |
| }; | |
| }]); |
dsadsadsadsadas
why not use material loader with angular $loaded
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
dsadsadddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd