What is the best way to implement a loader animation while scripts and resources are loaded in Angular?

Question

I want users of my web application to be presented with an progress bar indicating current progress of loading files and scripts necessary.

Preferably showing percentage, but a simple loader gif is an acceptable solution.

What is the best way to implement a loader that could show an indication of percentage finished loading images, css and js in Angular, if at all possible?

I'm thinking of having a small application whose only purpose is to load resources and indicate progress, and when all scripts and resources are finished, fire of some callback to boot angular (angular.bootstrap()).

My guess is that there are a bunch of smart guys that could come up with a better solution, and I hope and think that more than me can benefit from some good advice regarding this.

It would also be nice to be able to specify an estimated file size for loader correctedness:

<script load-src="//somehost.com/file.js" filesize="100"/>
<img load-src=sprite.png" filesize="50"/>

Answer 1

Are you talking about just the loading of <script> tags and <link> tags etc? If so, you could use ng-cloak. Make everything hidden with ng-cloak CSS, and make a spinner shown by default. Then remove the spinner once angular fully loads. more info about ng-cloak

If you mean loading spinner until a set of your own HTTP requests are done, you could use angular-promise-tracker to track the HTTP requests and catch the 'start' and 'done' events to up the percentage.

Here's an example of the http requests loading spinner: http://plnkr.co/edit/SHtk7eSrbs1dfoQawPCW?p=preview

Answer 2

For a bare bones, simple loader gif:

HTML:

<div ng-show="displayLoadingIndicator" class="LoadingIndicator">
</div>

CSS:

.LoadingIndicator {
  display: block;
  background: url(../img/loading.gif) center center no-repeat;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

Controller JS:

function MyCtrl($scope, $http) {
    $scope.displayLoadingIndicator = true;
    $scope.loadStuff = function (serverResponse) {
        // load my stuff
        $scope.displayLoadingIndicator = false;