I want to create a custom loading spinner for my ionic 4 app with a GIF or SVG animation. There is no "content" property to fill with html, so how do I replace the bubbles SVG in this case with a custom SVG or GIF?
async presentLoading() {
const loading = await this.loadingController.create({
spinner: 'bubbles',
duration: 2000
});
return await loading.present();
}
Using Loading First, we need to inject $ionicLoading in our controller as dependency. After that, we need to call the $ionicLoading. show() method and loading will appear.
By default the loading indicator will show even during page changes, but this can be disabled by setting dismissOnPageChange to true . To dismiss the loading indicator after creation, call the dismiss() method on the Loading instance.
The default spinner to use is based on the platform. The default spinner for ios is "lines" , and the default for android is "crescent" . If the platform is not ios or android , the spinner will default to crescent . If the name property is set, then that spinner will be used instead of the platform specific spinner.
As ionic V4 official documentation, its not possible. But you can use a trick via CSS.
Use <ion-img>
tag inside message key of allert intead of <img/>
tag
const loading = await this.loadingController.create({
message: '<ion-img src="/assets/svg/shopping.svg" alt="loading..."></ion-img>',
cssClass: 'scale-down-center',
translucent: true,
showBackdrop: false,
spinner: null,
duration: 2000
});
Create custom keyframes, you can also use this one to generate your own animation.
// CUSTOM ANIMATION KEYFRAMS********************
@-webkit-keyframes scale-down-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
@keyframes scale-down-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
// CUSTOM ANIMATION KEYFRAMS********************
Create custom class
.scale-down-center {
-webkit-animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
}
EResman,
I answered your question on this link
I'm Using IONIC 4
this.myLoading = await this.loadingCtrl.create({
spinner: null, -> here you can add others spinners ou set null
remove this attribute -> message: '<ion-img src="assets/gif/loading.gif"></ion-img>',
cssClass: 'custom-loading'
});
await this.myLoading.present();
at theme/variables.scss
ion-loading.custom-loading {
.loading-wrapper {
background: #ffffff url("assets/gif/loading.gif") no-repeat center;
}
}
If you want change dimensions you can change this properties.
background-size: 100px 100px; /* to change dimension of background */
padding-top: 36px; /* padding top of white square */
padding-bottom: 36px; /* padding bottom of white square */
border-radius: 0.8rem; /* border-radius white square */
I hope that help you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With