Ionic - Show spinner after button is pressed

Question

This spinner option from ionic is spinning all the time Like here

<ion-spinner icon="spiral"></ion-spinner>

How to make the spinner spin only after user presses the button, not before!?

Answer 1

HTML

<button ng-Click="someFunction()"></button>

Controller

$scope.someFunction = function(){     
     $ionicLoading.show({
              noBackdrop :false,
              template: ' <ion-spinner icon="spiral"></ion-spinner>',
              duration :20000//Optional
          });
     //Do Something
     $ionicLoading.hide();//Hide it after Something is completed
}

It will show spinner as soon as you press button . Regards

Answer 2

You can try this also inside your controller

$scope.show = function() {
        $ionicLoading.show({
          template: '<p>Loading...</p><ion-spinner icon="android"></ion-spinner>'
        });
      };

      $scope.hide = function(){
        $ionicLoading.hide();
      }; 

You can call $scope.show($ionicLoading); to start the spinners and you can make it end with this $ionicLoading.hide();

of course you have to inject $ionicLoading in your controller.

It worked for me hope it will help you

Answer 3

You can simply show and hide ion-spinner directive. In the codepen link you can change the button part and paste this:

<button type="submit" ng-click="click()" class="button button-block button-positive">
    <ion-spinner ng-hide="showing" class="spinner-energized"></ion-spinner>
    <span class="button-text">Click me!</span>
</button>

and add to MainCtrl

$scope.showing = true;
$scope.click = function(){
    $scope.showing = false;
}

so when you press the button spinner will show. Of course you need some logic to stop it but this is just to show you how you can handle this. Hope it helps.