Tenho um objeto que indica que a página está sendo carregada. Porém, não está funcionando da forma correta, segue código:
HTML:
<div class="fundo_login">
<div class="carregando_inicio" ng-if="carregando == true"> //Quando carregando for TRUE mostra o spinner
<img src="/provas/app/imagens/spinning-circles.svg"/>
</div>
<div class="box_login" ng-if="carregando == false"> //Quando for false, mostra o conteúdo.
<div class="painel_cadastro">
<div class="logo_fabet">
<img src="app/imagens/logo_fabet.jpg">
</div>
</div>
</div>
</div>
JS:
$scope.carregando = true;
$scope.acabou = function() {
$timeout(function(){
$scope.carregando = false;
}, 3000);
}
$scope.acabou();
Percebam que caregando inicia como TRUE para que logo apareça o spinner, depois de 3 segundos seu status é alterado para FALSE, fazendo com que assim desapareça o spinner e apareça o conteúdo. Em partes esta funcionando. O que está errado é que quando a página começa a carregar, os dois aparecem juntos (durante alguns milésimos de segundo), não respeitando o ng-if, conforme imagem abaixo:
Outra dúvida, como eu poderia fazer para sumir o spinner e mostrar o conteúdo somente quando a página estiver totalmente carregada?