Toast with ion-spinner

Ionic Framework ionic-v3
1

I’d like to add a loading icon inside the message Toast, is it possible?
I tried to add a html tag bit it’s not accepted.

It’d be perfect with ion-spiner

:arrows_counterclockwise: Synchronizing

2

you can use the chip , look here https://ionicframework.com/docs/api/components/chip/Chip/

3

Since I’m also looking for exactly same thing, I’d like to know what did you meant with using chips @guadyass?

As @Duveral already explained, you cannot use HTML tags inside message of Toast controller. So, how to do it without hacking into CSS and using animate functions etc?

4

Hello @lordgreg did you found any solution?

5

Hi @eltonfaust and others,

I did not. I would, however, suggest creating own div element with ion-spinner and styling it with position absolute and other parameters so that it appears as own Toast. It could look exactly the same if using correct background color, border radious and, eventually, transform for animation style.

6

You can do using css. Only hack is to find the ionicon variable for icon you want. Refer https://github.com/ionic-team/ionicons/blob/master/scss/_ionicons-variables.scss

  1. Add css class to your toast:

     let toast = this.toastCtrl.create({
     message: 'You have an urgent notification',
     position: 'top',
     showCloseButton: true,
     closeButtonText: 'View',
     cssClass: 'urgent-notification'
 });

  2. Add icon before the message

.urgent-notification .toast-message:before {
  content: '\f267';
  color: black;
  display: inline-block;
  font-family: "Ionicons";
  font-style: normal;
  font-weight: bolder;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  font-size: 2rem;
}
7

This gives me a triangle, how to put the iOS spinner?