How can I make it so my web page displays a "wait" type of cursor when I have an array with a length > 0?

Question

When my application loads or fetches data I add an entry to an array called "loading"

I then have the following that displays in my status bar:

<span data-ng-repeat="load in loading">|</span>

It shows a vertical bar for every item loading.

Is there a way that I could also change my cursor so that when there's some loading activity (when loading.length > 0) then the cursor changes to :

cursor:wait;

Answer 1

If you are using ui.router, you can use the $stateChangeStart, $stateChangeSuccess and $stateChangeError to trigger when and when not to show the loading cursor. If you are using routes, simply use $routeChangeStart, $routeChangeSuccess and $routeChangeError in replacement.

//loading controls 
document.body.style.cursor='default';

$scope.$on('$stateChangeStart', function() {
  document.body.style.cursor='wait';
});
$scope.$on('$stateChangeSuccess', function() {
  document.body.style.cursor='default';
});
$scope.$on('$stateChangeError', function() {
  document.body.style.cursor='default';
});

You can also use these state changes to trigger a loading icon.

//loading controls 
$scope.isViewLoading = false;
document.body.style.cursor='default';
$scope.$on('$stateChangeStart', function() {
  $scope.isViewLoading = true;
  document.body.style.cursor='wait';
});
$scope.$on('$stateChangeSuccess', function() {
  $scope.isViewLoading = false;
  document.body.style.cursor='default';
});
$scope.$on('$stateChangeError', function() {
  $scope.isViewLoading = false;
  document.body.style.cursor='default';
});

<span class="spinner" ng-show="isViewLoading">Loading...</span>

Answer 2

You can use ng-style or ng-class

For example, create custom style:

$scope.state = 'wait';

$scope.mySyle = {
  'cursor': state
}

Now, we can change our $scope.state during the time and out style will change respectively.

For ng-class - the same thing, just create style into css file and switch ng-class value.

Here is a references:

• ng-class - use when the set of CSS styles is static/known ahead of time
• ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.

(took from THIS POST)