async presentLoading() {
const loading = await this.loader.create({
duration: 2000,
showBackdrop:false,
cssClass:'sa',
spinner:'false',
message:`
<div class="custom-spinner-container">
<img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
</div>`
});
return await loading.present();
}
你可以简单地用css来实现它
//Header of file
import { LoadingController } from "@ionic/angular";
//In the constructor
constructor(public loadingCtrl: LoadingController) {
}
async showLoader () {
this.loader = await this.loadingCtrl.create({
cssClass: 'custom-loader',
spinner: null
});
await this.loader.present();
}
/* Inside global.scss
You can create amazing gifs with
https://loading.io/animation
*/
.custom-loader {
--background: transparent;
ion-backdrop {
background-color: #fff;
opacity: .9 !important;
}
.loading-wrapper {
-webkit-animation: ld-vortex-out 2s ease-out infinite;
animation: ld-vortex-out 2s ease-out infinite;
animation-timing-function: cubic-bezier(0.05, 0, 3, 0.05);
background-image: url("/assets/img/baubap-logo-circle.svg");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
min-width: 90px;
min-height: 90px;
box-shadow: none;
-webkit-box-shadow: none;
}
}
@keyframes ld-vortex-out {
0% {
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
60% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 0;
}
}
@-webkit-keyframes ld-vortex-out {
0% {
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
60% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 0;
}
}
Result
Baubap 加载器屏幕 https://i.stack.imgur.com/EFpHu.png
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
