Display (Show) Loading Progress GIF Image when Page Loads in AngularJS

Last Reply 2 months ago By skp

Posted 2 months ago

I have four pages, when the application url is typed and entered, it must show a loader or spinner before the login page loads.

Likewise, the loader must show before each and every page loads.

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <link rel="icon" href="../Styles/images/icons/logo1.png" />
    <title>SSIS Warehouse</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
    <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/3.0.0/angucomplete-alt.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <script data-require="modernizr@*" data-semver="2.6.2" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body ng-app="myApp">
    <div ng-view></div>
    <script src="EBSAjsN/app.module.js"></script>
    <script src="EBSAjsN/app.config.js"></script>
    <script src="EBSAjsN/Scripts/loginController.js"></script>
    <script src="EBSAjsN/Scripts/dashboardController.js"></script>
    <script src="EBSAjsN/Scripts/receiptController.js"></script>
    <script src="EBSAjsN/Scripts/issueController.js"></script>
</body>
</html>
Posted 2 months ago

Hi skp,

For display loading progress i have created a separate javascript file and html page.

Then i have included the javascript file in the page where i have to show the loader and included the loader html using the ng-include in the page where i have to shkow the progress.

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

JavaScript

var app = angular.module("MyApp", []);
app.controller("MyController", function ($scope, $timeout) {
    $scope.ShowLoader = true;
    $timeout(function () {
        $scope.ShowLoader = false;
    }, 100);
});

HTML

Loader

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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>
</head>
<body>
    <div class="modal" align="center" ng-show="ShowLoader">
        <br /><br />Loading. Please wait.<br /><br />
        <img src="Images/progress.gif" alt="Loading. Please wait." />
    </div>
</body>
</html>

HTMLPage

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script src="Loader.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController" align="center">
        <div ng-include="'Loader.htm'"></div>
    </div>
</body>
</html>

HTMLPage2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script src="Loader.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController" align="center">
        <div ng-include="'Loader.htm'"></div>
    </div>
</body>
</html>

Screenshot



Posted 2 months ago

Just modifying your code more simpler and easy, by just adding the ng-show attribute in all partial views just below the body tag(open).

HTML Page 1 :

<body>
    <div ng-show="loadingState">
        <div class="loading" id="loader"></div>
    </div>

HTML Page 2 :

<body>
    <div ng-show="loadingState">
        <div class="loading" id="loader"></div>
    </div>

 

<style>
        .loading {
            position: fixed;
            z-index: 9999;
            margin: 0 auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #fff;
            background-image: url(EBSAjsN/Styles/images/icons/loader.gif);
            /*background-size: cover;*/
        }
</style>

 

 $scope.loadingState = true;
    $timeout(function () {
        $scope.loadingState = false;
    }, 1000);