CSS:Spinner overwrite the original spinner's settings, need different css setting for each spinner

Question

I have two type of spinner in ionic 1 framework. The ionic spinner originally has the dark background. Therefore, I turn it off with the code below.

app.js

.constant('$ionicLoadingConfig', {
    noBackdrop: true,
    //duration: 1800,
    animation: 'fade-in',
    template: '',

})

app.css

.loading{
  background-color:transparent!important;
}

However, I need a page with a different from others spinner. Only for the page special.js where I want the spinner with the original dark background. However, with the code I set, the spinner setting at app.js is overwrite.

special.js

        $scope.$on("$ionicView.afterEnter",
            function (event, data) {
                $ionicLoading.show({
                    noBackdrop: true, duration: 1888,
                    template: ' 
Analyzing'

                });
                $scope.watchLists = $watcherFactory.getWatchLists();
                $scope.currentWatchList = window.localStorage.getItem('currentWatchList');
                console.log($scope.currentWatchList);
                if ($scope.watchLists.length > 0)
                    $scope.getWatchedStocks();
                else {
                    $ionicLoading.hide();
                    $scope.currentWatchList = "_";
                }

special.css

.loading{
  background-color:black!important;
}

How to make the spinner in special.css limited to that page only and not overwrite all the spinner?

Currently, background is set to black for all spinner

The spinner that I wanted when app.js loading is (orange color, it is not that obvious)

The spinner that I wanted when special.js loading is

Note that in the mobile app, user will jump from page to another page and I just want the special.js page to have the spinner with dark background. app.js spinner is consider the default spinner in the app except when special.js is called.

Update:(kite.js.org)

app.css

.loading {
    background-color:transparent!important;
}
.special-page .loading {
    background-color:black!important;
}

special.js

    $rootScope.isSpecial = true; 
    $scope.$on('$destroy', function() 
               {delete $rootScope.isSpecial});



    $scope.$on("$ionicView.afterEnter",
        function (event, data) {
            $ionicLoading.show({
                noBackdrop: true, duration: 1888,
                template: ' 
Analyzing'

            });
            $scope.watchLists = $watcherFactory.getWatchLists();
            $scope.currentWatchList = window.localStorage.getItem('currentWatchList');
            console.log($scope.currentWatchList);
            if ($scope.watchLists.length > 0)
                $scope.getWatchedStocks();
            else {
                $ionicLoading.hide();
                $scope.currentWatchList = "_";
            }



        }
    );

The default spinner shows transparent background but the spcial.js still show tansparent background instead of black

user_8547541 · Answer

$ionicLoading appends div.loading-container to , I can not simply use a single selector to control it over different pages; therefore the problem becomes how I can change 's class when special page is entered, my solution is not elegant, but suppose to work:

add a ngClass to body: , it will be triggered when isSpecialPage is true
inject $rootScope for the controller of special.js, and:
- put $rootScope.isSpecialPage = true at the beginning of controller, so will have a special-page class when this page (ui state) is entered
- listen to $destroy event, change $rootScope.isSpecialPage = false, so special-page is removed when scope is destroyed (state changed)

$scope.$on('$destroy', function() {
    $rootScope.isSpecialPage = false;
});

now you can write css like:

.loading {
    background-color:transparent!important;
}
.special-page .loading {
    background-color:black!important;
}

Add minimal sample:

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading, $rootScope) {

  function showLoading() {
    // Setup the loader
    $ionicLoading.show({
      content: 'Loading',
      animation: 'fade-in',
      showBackdrop: true,
      maxWidth: 200,
      showDelay: 0
    });

    $timeout(function () {
      $ionicLoading.hide();
      $scope.msg = 'content loaded ' + new Date();
    }, 2000);
  }
  
  $scope.showLoading = function(isSpecial) {
    $rootScope.isSpecial = isSpecial;
    showLoading();
  }
});

.loading {
  background-color: transparent !important;
}

.special-page .loading {
  background-color: rgba(0, 0, 0, 0.5) !important;
}


  
    
     
    
    Ionic Modal

    
    
  
  
    
      
        
          Sample Ionic Loading
        
        
          
            Click to show transparent Loading
            Click to show special Loading
            {{msg}}

user_7078625 · Answer

What have you done so far is right. You can remove the original spinner again or make it to what you want when you leave the special.js page,

//in your special.js controller
$scope.$on('$stateChangeStart', function () {
         //your custom spinner here
});

Usefull links,

if using state provider - $stateChangeStart
if using location provider - $locationChangeStart

why css matters? you can set the css again to transparent in each page?

CSS:Spinner overwrite the original spinner's settings, need different css setting for each spinner

2 Answers