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
