How to add overlay spinner in angularjs

Download a small plugin from Angular overlay

Include required files. It requires ngAnimate


Where you can download spinner.js and spinner.css from the above mentioned link

Have a HTML code like this :

Your feedback has been sent to {{rname}}

Your controller code will be like this. You start the spinner before AJAX call and close it once call is over

$scope.sendMsg = function(){
if($scope.spinner)
return;
$scope.spinner = true;
$http(
{
method : “post”,
url : ‘hf?action=savemsg&ruserid=’ + $rootScope.ruserid,
data : $scope.data
}).success(function(data) {
$scope.spinner = false;
if($rootScope.isLoggedIn)
$scope.msgsent = true;
else
window.top.location = ‘#/mymessages/sent’;
}).error(function(data) {
$scope.spinner = false;
});
}

Uday Ogra

Connect with me at http://facebook.com/tendulkarogra and lets have some healthy discussion :)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *