Skip to content

Instantly share code, notes, and snippets.

@dcustodio

dcustodio/app.js

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dcustodio/84ac06674377188a9556 to your computer and use it in GitHub Desktop.
Save dcustodio/84ac06674377188a9556 to your computer and use it in GitHub Desktop.
Download ZIP
angularjs spinner directive
Raw
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.loader= true
});
/**
* Created by David on 25/09/2014.
*/
/**
* @ngdoc directive
* @name directive:spinner
* @restrict EA
* @scope
*
* @description
* replaces a icon for a spinner icon and after a timeout replaces for the original icon
*
* @example
<spinner show="isLoading" class="fa fa-flash" spinner-class="fa fa-spinner fa-spin"></spinner>
*/
app.directive('spinner', ['$timeout', function ($timeout) {
return {
restrict: 'EA',
template: '<i ng-class="currentClass" ></i>',
scope: {
show: '=',
class: '@',
spinnerClass: '@'
},
replace: true,
link: function (scope, elm, attrs) {
//scope.currentClass = scope.class;
scope.$watch('show', function () {
if (scope.show) {
scope.currentClass = scope.spinnerClass;
$timeout(function () {
//if hasn't change yet
if (scope.show) {
scope.currentClass = scope.class;
}
}, 1500);
} else {
scope.currentClass = scope.class;
}
});
}
};
}
]);
/**
* @ngdoc directive
* @name directive:simple-spinner
* @restrict EA
* @scope
*
* @description
* shows a icon for a spinner icon and after a timeout hides the spinner
*
* @example
<simple-spinner show="isLoading" class="fa fa-spinner fa-spin"></simple-spinner>
*/
app.directive('simpleSpinner', ['$timeout', function ($timeout) {
return {
restrict: 'EA',
template: '<i ng-class="class" ng-show="show"></i>',
scope: {
show: '=',
class: '@'
},
replace: true,
link: function (scope, elm, attrs) {
// scope.showit = scope.show;
scope.$watch("show", function () {
if (scope.show) {
$timeout(function () {
//if hasn't change yet
if (scope.show) {
scope.show = false;
}
}, 1500);
} else {
scope.show = false;
}
});
}
};
}
]);
Raw
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="fontawesome@4.1.0" data-semver="4.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button ng-click="loader=true;" >load</button>
<button ng-click="loader=false;">stop</button>
<br>
<simple-spinner show="loader" class="fa fa-circle-o-notch fa-spin"></simple-spinner>
<br>
<spinner show="loader" class="fa fa-user" spinner-class="fa fa-spinner fa-spin fa-2x"></spinner>
</body>
</html>
@dcustodio
Copy link
Author

plnker example

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