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!?

Solution 1

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

Solution 2

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.

Solution 3

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

Comments

[lewis4u]

Sorry but where is MainCtrl i'm using ionic-1 and i've been working with ionic for a week now (7 days)

[macrog]

ok, if you open a link from codepen you got screen split in 2 columns, left it's html where you need to paste a button part of the code, right side it's a JS part where you have MainCtrl

[lewis4u]

can you please come to chatroom

[macrog]

how can I go to chatroom ?