angularjs ui grid show spinner loader

Hello everyone, I am going share the code sample for how to display the angularjs ui grid show spinner loader like you can see the below image.

For live demo go to http://embed.plnkr.co/QHrEECtSYNaSkjSgdksr/preview

The Out-Put look like below ng-grid view image.

HTML show loader code-sample

?

01 02 03 04 05 06 07 08 09 10 11 12

<div ng-app="userApp">     <div ng-controller="UserCtrl">         <div class="col-md-3">             <div class="input-group  pull-right">                 <img class="spinner" ng-show="loading" src="~/Content/img/loding.png" />             </div>         </div>         <div id="gridView">             <div class="ngGridStyle" ng-grid="mobileGridView"></div>         </div>     </div> </div>

<div ng-app="userApp">
    <div ng-controller="UserCtrl">
        <div class="col-md-3">
            <div class="input-group  pull-right">
                <img class="spinner" ng-show="loading" src="~/Content/img/loding.png" />
            </div>
        </div>
        <div id="gridView">
            <div class="ngGridStyle" ng-grid="mobileGridView"></div>
        </div>
    </div>
</div>

AngularJs ng grid show spinner loader code-sample

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

var app = angular.module('userApp', ['ngGrid']); app.service('userService', function ($http) {     this.getUsers = function () {         return $http({             method: 'GET',             url: baseURL + 'Api/MobilePref/Get/' + uid         })         .success(function (resp) {         })         .error(function (resp) {         });     }; }); app.controller('UserCtrl', function ($scope, userService) {     $scope.users = null;     //Set loading is true at the time when load the page.     $scope.loading = true;     userService.getUsers().then(function (Result) {         if (Result !== undefined) {             $scope.users = Result;         }     })     .finally(function () {         //Here Called If services call is success or failed.         //Set the loading is false.         $scope.loading = false;     });     $scope.userGridColumns = [             { field: 'UID', displayName: 'Account'},             { field: 'UName', displayName: 'AlertToMobile'},             { field: 'UEmail', displayName: 'AlertToEmail'}];     $scope.mobileGridView = {         data: 'users',         columnDefs: 'userGridColumns'     };    });

var app = angular.module('userApp', ['ngGrid']);

app.service('userService', function ($http) {
    this.getUsers = function () {
        return $http({
            method: 'GET',
            url: baseURL + 'Api/MobilePref/Get/' + uid
        })
        .success(function (resp) {
        })
        .error(function (resp) {
        });
    };
});

app.controller('UserCtrl', function ($scope, userService) {
    $scope.users = null;

    //Set loading is true at the time when load the page.
    $scope.loading = true;

    userService.getUsers().then(function (Result) {
        if (Result !== undefined) {
            $scope.users = Result;
        }
    })
    .finally(function () {
        //Here Called If services call is success or failed.
        //Set the loading is false.
        $scope.loading = false;
    });

    $scope.userGridColumns = [
            { field: 'UID', displayName: 'Account'},
            { field: 'UName', displayName: 'AlertToMobile'},
            { field: 'UEmail', displayName: 'AlertToEmail'}];

    $scope.mobileGridView = {
        data: 'users',
        columnDefs: 'userGridColumns'
    };    
});

For output : you can go on link http://embed.plnkr.co/QHrEECtSYNaSkjSgdksr/preview