Loader Example Using ngShow in AngularJS.

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

Here, we are using HTML loader and whose CSS are Shown below and need to add this css under style tag,

.loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

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 Where we will Use our 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">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>

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;
        }

        .loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>
</html>

The Output looks like this,

Note:- This is Just a Sample Code and You can Change as per your requirement.

Saturday 9 December 2017

Loader Example Using ngShow in AngularJS.

2 comments:

Contact Form