Angular ui-router Loading Indicator

gistfile1.txt

A fairly simple and generic solution would be determining currently resolved ui-view by element hierarchy.

Create a directive and assign it to your ui-view elements. Example:
<div ui-view state-loader>
    <div ui-view state-loader></div>
</div>
The directive will use the $stateChangeStart events to decide whether current ui-view is the one being resolved and add relevant classes. Example:
 angular.module('myApp')
  .directive('stateLoader', function stateLoader() {
    return {
      restrict: 'A',
      scope: {},

      link: function (scope, element) {
        scope.$on('$stateChangeStart', function (e, toState) {
          if (element.parents('[ui-view]').length === toState.name.split('.').length - 1) {
            element.addClass('loading-state');
          }
        });

        scope.$on('$viewContentLoaded', function () {
          element.removeClass('loading-state');
        });
      }
    };
  });
This works quite well for simple state configurations with nested views.
It probably isn't enough for more complicated configurations or states with multiple views.