Loader Example Using Loader Image in AngularJS.

In this article, We will discuss about a Loader Example using Loader Image in AngularJS.

Here, we are using loader Image in place of HTML loader. So first add any loader image into your Solution.

After that we added background overlay means when the loader will load then at that time it will disable the background so we can't able to perform any kind of operation and whose css is as below,

     .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

Now, Let's add angular js first in our head section like this,

<script src="Scripts/angular.min.js"></script>

After that We Will create our Module and Controller like this under the script tag,

   <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>

Now, let's Create our div tag and in that place one image tag Whose src is the loader image which we added earlier and Where we will Use our either ngHide or ngShow and Which is Shown in below,

<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <img src="Image/loader.gif" id="img1" style="margin-left:169px;"/>
            </div>
        </div>
    </form>
</body>

Here, We used ng-show but any one can use ng-hide also.

So when we will run the application, as $scope.myLoader = true; the loader Will display and if you want to hide the loader then We have to use $scope.myLoader = false; .

The Whole Code looks like as below,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>
    <style>
        .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }
    </style>
</head>
<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <img src="Image/loader.gif" id="img1" style="margin-left:169px;"/>
            </div>
        </div>
    </form>
</body>
</html>

The Output of the Code looks like this,

Sunday 10 December 2017

Loader Example Using Loader Image in AngularJS.

4 comments:

Contact Form