1

I'm trying to use a loader like this one: http://codepen.io/max-scopp/pen/FArlb

I have it placed outside my ng-view div in the index.html. At the moment, it's looping regardless of what's going on in the ng-view div. I want that loader to run only when the ng-view is loading content and stop on a certain color when it is done loading… can anyone point me in the right direction?

HTML:

<div class="loader">
    <div class="green"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</div>

Javascript: 

$(document).ready(function() {
    $('.green').addClass('sd0');
    $('.red').addClass('sd05');
    $('.blue').addClass('sd1');
    $('.yellow').addClass('sd15');
});
Sev Gevorkyan
  • 43
  • 5

1 Answers1

0

You can have an http interceptor or you can have an indicator of loading in your controller which is set to a default value, once your service starts loading then you will modify it to different value. Depending on that indicator you can show or hide your loader. Please check out answers here: Showing Spinner GIF during $http request in angular

Community
  • 1
  • 1
Jama A.
  • 15,680
  • 10
  • 55
  • 88