AngularJS: show loader image until data is loaded

display loader onload and hide it once data loaded.

$scope.showLoader = true;$http.get('http://www.testurl.com/index.php/site/getprofileLocations').success(function(data){    $scope.showLoader = false;    // rest of your code});

EDIT: html code from Saeed's answer

<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->    <img src="source"> <!-- or any other spinner --></div>

Addition to @Venugopal`s answer. To display that loading image in the html

<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->  <img src="source"> <!-- or any other spinner --></div>

You need to show the loader image before the ajax call and remove it after it completes in both success and error handler.

you will find plenty of loader images online, which you can use it for your application.

JS CODE

 //show the loader image in center of screen & prevent any user interactions $scope.imLoading = true; $http.get('http://www.testurl.com/index.php/site/getprofileLocations').then(   function(data){       //hide the loader image & process successful data.        $scope.imLoading = false;       }, function (errorData) {       //hide the loader image & show error message to user       $scope.imLoading = false; });

CSS:

.im_loading{ display:none; position:fixed; top:50%; left:50%; margin:-35px 0px 0px -35px; background:#fff url(../images/loader.gif) no-repeat center center; width:70px; height:70px; z-index:9999; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

HTML CODE:

<div class="im_loading" ng-show:"imLoading"></div>

Note: Your code is proccessing only successful ajax call & not erroneous call which is not good as your code becomes unresponsive when error is returned, so you need to handle error case as well.