# $ionicLoading but with some way to detect taps

**URL:** <https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073>\
**Category:** uncategorized\
**Created:** [May 19, 2015, 12:58am UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073 "2015-05-19T00:58:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![arjunrc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arjunrc/32/82541_2.png) [@arjunrc](https://forum.ionicframework.com/u/arjunrc)\
**Post date:** [May 19, 2015, 12:58am UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/1 "2015-05-19T00:58:01Z")

</div>

Hi, is there a construct in ionic that displays a loading message, just like $ionicLoading but also allows me to detect taps outside the message so I can cancel that loading message?

I basically have a situation where a function gets called, say, 100 times in quick succession (the function does an http.get) and each time it gets called, it displays a “Loading…”

I am currently using $ionicLoading for this and hiding after http success, but I’d like a means to be able to cancel this loop.

In the template, I have

```auto
 <ion-content on-tap="tapped();">   

```

but when ionicLoading shows, on-taps are disabled.

---

<div class="post-metadata">

**Author:** ![nnnnnorthhhhh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nnnnnorthhhhh/32/98566_2.png) [@nnnnnorthhhhh](https://forum.ionicframework.com/u/nnnnnorthhhhh)\
**Post date:** [May 19, 2015, 2:08am UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/2 "2015-05-19T02:08:14Z")

</div>

There are two methods that come to mind immediately for me.

1. You can just use a modal that you customize the CSS on to mimic the look of the loading, or change it to how you want and this will give you full gesture control.

2. You can edit the $ionicLoading provider source to allow something like this.

> **[$ionicLoading, is there a way to cancel loading?](http://forum.ionicframework.com/t/ionicloading-is-there-a-way-to-cancel-loading/2939)**
>
> Hello Guys. Is it possible to cancel the loading spinner by the user when it is taking a long time, like a cancel button or just touching the screen? Thank you.

Found this that might also guide you in the right direction.

Good luck!

---

<div class="post-metadata">

**Author:** ![arjunrc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arjunrc/32/82541_2.png) [@arjunrc](https://forum.ionicframework.com/u/arjunrc)\
**Post date:** [May 20, 2015, 2:53am UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/3 "2015-05-20T02:53:20Z")

</div>

NorthMcCormick, thank you - that works perfectly. However, I want the “X” icon bigger - increasing font size for the ion-cross messes up alignment with the text next to it. I also tried putting in the ion-cross inside the button - while that fixes the size of the X, the alignment problem with the text next to it is frustrating me. Do you know how to fix it?

my code:

```auto
 var toastStr="Searching page "+eventsPage+" for '"+$scope.search.text+"'...";
           
            

$ionicLoading.show({ scope:$scope, template: '<button class="button button-clear icon-left ion-close-circled" style="line-height: normal; min-height: 0; min-width: 0;" ng-click="cancelSearch()" ></button>'+toastStr});

```

The style="" makes no difference where it is specified or not

Here is what it looks like: note the complete misalignment

![image](https://global.discourse-cdn.com/ionicframework/original/2X/a/a0211a708088e7544d3ba5d506bd82bf5475fc73.png)

---

<div class="post-metadata">

**Author:** ![nnnnnorthhhhh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nnnnnorthhhhh/32/98566_2.png) [@nnnnnorthhhhh](https://forum.ionicframework.com/u/nnnnnorthhhhh)\
**Post date:** [May 20, 2015, 3:56pm UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/4 "2015-05-20T15:56:57Z")

</div>

Great question… let me take a look and see if I can get something to work

---

<div class="post-metadata">

**Author:** ![nnnnnorthhhhh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nnnnnorthhhhh/32/98566_2.png) [@nnnnnorthhhhh](https://forum.ionicframework.com/u/nnnnnorthhhhh)\
**Post date:** [May 20, 2015, 4:06pm UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/5 "2015-05-20T16:06:10Z")

</div>

```
$ionicLoading.show({ scope: $scope, template: '<button class="button button-clear" ng-click="cancelSearch()" style="color: #FFFFFF;"><i class="icon ion-close-circled" style="vertical-align: middle;"></i><span style="vertical-align: middle;">&nbsp;&nbsp;' + toastStr + '</span></button>'});

```

Here is what I was able to get working. I was just testing this in my app which does have some global custom styles but I hope it can get you in the right direction. I would test for platform compatibility too. The entire block is a button at this point which is nice so the user doesn’t have to fumble to hit the X if they’re doing something, they can just click the text/button and it will stop the loading.

Edit: to make this cleaner you could totally wrap these in a CSS class too once you have the look right. Just might help if you need to replicate this in other parts of your code.

---

<div class="post-metadata">

**Author:** ![arjunrc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arjunrc/32/82541_2.png) [@arjunrc](https://forum.ionicframework.com/u/arjunrc)\
**Post date:** [May 20, 2015, 4:26pm UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/6 "2015-05-20T16:26:51Z")

</div>

Hi @NorthMcCormick, actually putting it all inside the button was something I tried yesterday. While it solves the alignment problem, it truncates the text and does not word wrap even if I stuff the ‘wrap’ class inside the button. This becomes painful in phones, I get a ‘Searching page 43 for’ and the rest gets cut off mercilessly. so I can go the ‘all in button’ route, if I figure out how to text wrap

Thank you!

---

<div class="post-metadata">

**Author:** ![nnnnnorthhhhh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nnnnnorthhhhh/32/98566_2.png) [@nnnnnorthhhhh](https://forum.ionicframework.com/u/nnnnnorthhhhh)\
**Post date:** [May 20, 2015, 4:51pm UTC](https://forum.ionicframework.com/t/ionicloading-but-with-some-way-to-detect-taps/25073/7 "2015-05-20T16:51:25Z")

</div>

Oooh okay. That would be a problem, I can try some more things when I get back home tonight.