Display (Show) Loading Image on Button Click in AngularJS

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #B8B8B8;
        z-index: 99;
        opacity: 0.9;
        filter: alpha(opacity=90);
        -moz-opacity: 0.9;
        min-height: 100%;
        width: 100%;
    }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("MyApp", []);
    app.controller("MyController", function ($scope, $http, $window) {
        $scope.ShowLoader = false;
        $scope.Save = function () {
            $scope.ShowLoader = true;
            $http.post('Default.aspx/GetData', { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                //Hide loader image & process successful data.
                $scope.ShowLoader = false;
                if (response.data.d == "success") {
                    $window.alert("Data Saved successfully.");
                }
            }, function (response) {
                //Hide loader image & show error message to user.
                $scope.ShowLoader = false;
            });
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController" align="center">
    <input type="button" value="Save" ng-click="Save()" />
    <div class="modal" align="center" ng-show="ShowLoader">
        <br /><br />Loading. Please wait.<br /><br />
        <img src="Images/loader.gif" alt="Loading. Please wait." />
    </div>
</div>

Code

C#

[System.Web.Services.WebMethod]
public static string GetData()
{
    // System.Threading.Thread.Sleep(2000);
    return "success";
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function GetData() As String
    ' System.Threading.Thread.Sleep(2000)
    Return "success"
End Function

Screenshot