None
None

Reputation: 9247

How to add spinner inside ui-view?

I have menu where on click loads different views in <div data-ui-view></div>.Problem is that i want to load spinner inside that ui-view where i render different views but i dont know how.Any suggestion?

        <div ng-show="true">
            <div class='loading-sub-indicator'>
                <div class='loading-indicator-body'>
                </div>
            </div>
            <div class='loading-sub-indicator-overlay'>
                <div class='loading-indicator-body'>
                    <div class='spinner' ng-show="true">
                        <div class="vertical-align-center horizontal-align-stretch">
                            <div class="ticket-validation-container-no-buttons">
                                <div> <three-bounce-spinner></three-bounce-spinner> </div>
                                <div class="ticket-validation-container-text">@Translator.Translate("GETTING_REPORT")</div>
                                <div class="ticket-validation-container-text">@Translator.Translate("PLEASE_WAIT")</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`

Upvotes: 0

Views: 78

Answers (1)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

This should work very nice

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

app.run(function($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: 'foo'})
  })

  $rootScope.$on('loading:hide', function() {
    $ionicLoading.hide()
  })
});

Read more here
Also there is another great plugin angular-loading-bar.

Upvotes: 1

Related Questions