Clever Geek Handbook

Ionic LoadingController css

I am using Ionic3 and have LoadingController

.

this.loading = this.loadingCtrl.create({
  content: '',
  spinner: 'dots'
});

enter image description here

Question

Is it possible to remove the white background behind the dots? those. just place the dots in the background.

As you can see from the Ionic Documentation , there is an option cssClass

that can be used to create a custom style. However, I'm not sure what css to apply to LoadingController

.

UPDATE

Adding the following to variables.scss

:

$loading-md-background: transparent;

enter image description here

But how can I remove a field?

+3


source to share


2 answers


customize this color in 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 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;
  }
}
+7


source


Tiep Phan's solution doesn't work for me, so please see the example below for a working solution from 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;
    }
  }
}

Note that I have further increased the stroke width for the Android Load Accelerator to make it slightly more prominent.

+6


source






More articles:


All Articles