Skip to content

Instantly share code, notes, and snippets.

@revolunet
Last active May 21, 2020 11:13
Show Gist options
  • Save revolunet/4678995 to your computer and use it in GitHub Desktop.
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.
<!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>
.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}
}
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);
}
});
}
};
}]);
@darkhaniskakov
Copy link

dsadsa

@darkhaniskakov
Copy link

dsadsadddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

@darkhaniskakov
Copy link

dsadsadsadsadas

@mkamranhamid
Copy link

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