0
325
ViewsIonic LoadingController css
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? i.e. 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?
3 answers
Answer question0
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;
}
}
0
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:
app.component.ts
const LOADING = this.loadingCtrl.create({
cssClass: 'transparent',
});
app.scss
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.
0
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;
}
}