CODEWITHSUNDEEP
angularjs
Suresh Velusamy
Suresh Velusamy

Reputation: 49

Loader/spinner animantion while route is changing

How can I show a spinner or loader gif animation while route is changing from one to another.

I am using ng view like as follows:

 <div ng-view class="view-animate">
 </div>

I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?

Upvotes: 1

Views: 1229

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 2977

You can show and hide the loader when location change starts and is completed, respectively. Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.

HTML Code inserted below just to keep SO happy...

<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>

I hope it helps. Abhi.

Upvotes: 2

Related Questions