I am using Ionic3, and have a LoadingController
.
this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots'
});
Question
Is it possible to remove the white background behind the the dots? ie Just have the dots over the backdrop.
As you can see from the Ionic Documentation , there is an cssClass
option that can be used to do custom styling. However, I am not sure what css to apply to the LoadingController
.
UPDATE
Adding the following to variables.scss
:
$loading-md-background: transparent;
But how do I remove the box?
custom this color in your src/theme/variables.scss
available variables: https://ionicframework.com/docs/api/components/loading/LoadingController/#sass-variables
$loading-ios-background: transparent;
$loading-md-background: $loading-ios-background;
$loading-wp-background: $loading-ios-background;
to remove box-shadow on android, add one more variable:
$loading-md-box-shadow: none;
or add your class to cssClass
:
this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots',
cssClass: 'my-loading-class'
});
and style:
============================
UPDATE: IONIC 3
ion-loading.my-loading-class {
.loading-wrapper {
background: transparent;
box-shadow: none;
}
}
============================
IONIC 2
.loading-ios,
.loading-md,
.loading-wp {
.my-loading-class {
background-color: transparent;
box-shadow: none;
}
}
Tiep Phan's solution didn't work for me, so please see the example below for a working solution as of Ionic version 3.19.0:
const LOADING = this.loadingCtrl.create({
cssClass: 'transparent',
});
ion-loading.transparent {
.loading-wrapper {
background: transparent;
box-shadow: none;
.spinner-crescent circle {
stroke-width: 8px;
}
}
}
Please note that I have optionally increased the stroke width of the Android loading spinner to make it slightly more visible.
This works for me with Ionic 4 and 5 for Android and iOS (using mode:'md' ):
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { LoadingOptions } from '@ionic/core';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
constructor(public loadingController: LoadingController) { }
async present() {
// Dismiss all pending loaders before creating the new one
await this.dismiss();
let options: LoadingOptions = {
message: '<ion-img src="/assets/imgs/spinner.svg" alt="loading..."></ion-img>',
cssClass: 'custom-loading',
translucent: true,
showBackdrop: true,
spinner: null,
mode: 'md',
keyboardClose: true
};
await this.loadingController
.create(options)
.then(res => {
res.present();
});
}
/**
* Dismiss all the pending loaders, if any
*/
async dismiss() {
while (await this.loadingController.getTop() !== undefined) {
await this.loadingController.dismiss();
}
}
}
and then in global.scss:
.custom-loading {
--background: none;
.loading-wrapper{
box-shadow: none !important;
-webkit-box-shadow: !important;
}
}
// this how to apply custom style or replace the loading icon with your desired one
//.ts
this.loading = this.loadingCtrl.create({
spinner: 'hide',
cssClass: 'custom-spinner',
// message:"hello",
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box">
<img src="assets/img/LOADING-.gif" style="max-width: 100%;
width: 140px !important;"/>
</div>
</div>`,
// duration:
})
//app.css
.custom-spinner {
.loading-wrapper{
background: transparent !important;
box-shadow: unset !important;
}
}
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
constructor(public loadingController: LoadingController) { }
isLoading: boolean = false;
async present() {
this.isLoading = true;
return await this.loadingController.create({
spinner: null,
duration: 5000,
message: '<ion-img src="assets/images/loader-banorte.gif" ></ion-img>',
translucent: false,
cssClass: 'banorte-loading',
showBackdrop: true,
mode: 'md',
keyboardClose: false,
backdropDismiss: true
}).then(a => {
a.present().then(() => {
console.log('presented');
if (!this.isLoading) {
a.dismiss().then(() => console.log('abort presenting'));
}
});
});
}
async dismiss() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('dismissed'));
}
}
LoadingService.service.ts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.