ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display (Show) Loading Progress GIF Image when Page Loads in AngularJS<p>Hi&nbsp;<a class="username" rel="skp">skp,</a></p> <p>For display loading progress i have created a separate javascript file and html page.</p> <p>Then i have included the javascript file in the page where i have to show the loader and included the loader html using the <span style="text-decoration: underline;">ng-include</span> in the page where i have to shkow the progress.</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">JavaScript </span></strong></p> <pre class="brush: js">var app = angular.module(&#34;MyApp&#34;, []); app.controller(&#34;MyController&#34;, function ($scope, $timeout) { $scope.ShowLoader = true; $timeout(function () { $scope.ShowLoader = false; }, 100); });</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Loader</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .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%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;modal&#34; align=&#34;center&#34; ng-show=&#34;ShowLoader&#34;&gt; &lt;br /&gt;&lt;br /&gt;Loading. Please wait.&lt;br /&gt;&lt;br /&gt; &lt;img src=&#34;Images/progress.gif&#34; alt=&#34;Loading. Please wait.&#34; /&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p><strong>HTMLPage</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;Loader.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34; align=&#34;center&#34;&gt; &lt;div ng-include=&#34;&#39;Loader.htm&#39;&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>HTMLPage2</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;Loader.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34; align=&#34;center&#34;&gt; &lt;div ng-include=&#34;&#39;Loader.htm&#39;&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/Eq5bKOY.gif" alt="" /></span></strong></p>https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/Mon, 05 Aug 2019 08:28:47 GMTDisplay (Show) Loading Progress GIF Image when Page Loads in AngularJS<p>Hi <a class="username" rel="skp"> skp</a>,</p> <p>Refer below links -</p> <p><a href="https://www.npmjs.com/package/angular-page-loader">https://www.npmjs.com/package/angular-page-loader</a></p> <p><a href="https://www.code-hound.com/add-a-preloader-to-your-website-using-angularjs/">https://www.code-hound.com/add-a-preloader-to-your-website-using-angularjs/</a></p> <p><a href="https://stackoverflow.com/questions/31905608/angularjs-show-loader-on-every-page">https://stackoverflow.com/questions/31905608/angularjs-show-loader-on-every-page</a></p> <p><a href="https://www.bennadel.com/blog/2758-creating-a-pre-bootstrap-loading-screen-in-angularjs.htm">https://www.bennadel.com/blog/2758-creating-a-pre-bootstrap-loading-screen-in-angularjs.htm</a></p>https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/Fri, 09 Aug 2019 08:11:39 GMTDisplay (Show) Loading Progress GIF Image when Page Loads in AngularJS<p>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).</p> <p><span style="text-decoration: underline;"><em><strong>HTML Page 1 :</strong></em></span></p> <pre class="brush: html">&lt;body&gt; &lt;div ng-show=&#34;loadingState&#34;&gt; &lt;div class=&#34;loading&#34; id=&#34;loader&#34;&gt;&lt;/div&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;"><em><strong>HTML Page 2 :</strong></em></span></p> <pre class="brush: html">&lt;body&gt; &lt;div ng-show=&#34;loadingState&#34;&gt; &lt;div class=&#34;loading&#34; id=&#34;loader&#34;&gt;&lt;/div&gt; &lt;/div&gt;</pre> <p>&nbsp;</p> <pre class="brush: css">&lt;style&gt; .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;*/ } &lt;/style&gt;</pre> <p>&nbsp;</p> <pre class="brush: js"> $scope.loadingState = true; $timeout(function () { $scope.loadingState = false; }, 1000); </pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/https://www.aspforums.net:443/Threads/725726/Display-Show-Loading-Progress-GIF-Image-when-Page-Loads-in-AngularJS/Sun, 11 Aug 2019 23:35:19 GMT