CODEWITHSUNDEEP
angularjs
SrinivasAppQube
SrinivasAppQube

Reputation: 301

How to load the loading image/spinning gif until index.html page is loaded?

I created a web page using on angular. My page is loading very slow. Taking 5 to 10 sec. In meanwhile, I want to show some loading image or spinning gif.

In below js fiddle achive the above problem in javascript. I want to use this functionality in the angular js

html

<body>
<div id="load"></div>
<div id="contents">
      jlkjjlkjlkjlkjlklk
</div>

js

document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
   document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
  setTimeout(function(){
     document.getElementById('interactive');
     document.getElementById('load').style.visibility="hidden";
     document.getElementById('contents').style.visibility="visible";
  },10000);
 }
}

css 

#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)

`http://jsfiddle.net/d9ngT/

Upvotes: 0

Views: 1411

Answers (1)

k10der
k10der

Reputation: 726

You need to use ngCloack. https://docs.angularjs.org/api/ng/directive/ngCloak

And if you need to define a fullscreen loader while your angular app is starting, than create din element on your page and assign to it classes full-screen-loader and ng-cloack

Your css

.ng-cloack {
  z-index: 9999;
}
.full-screen-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -9999;
}

Your html

<div class="full-screen-loader ng-cloak">
  <img class="additional-styling" src="some-loader.gif">
</div>

While your angular app is being loaded, ng-clock class will set z-index of your loader container to be on top of every other content on the page. And when angular will be loaded, your loader container will be brought to the bottom of everyything on the page. Also i want to mention, that you may need to add some styling to body and html tags, so your loader will take all the browser's window space.

Upvotes: 1

Related Questions