Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

324
Visualizações
Ionic LoadingController css

I am using Ionic3, and have a LoadingController.

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

enter image description here

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;

enter image description here

But how do I remove the box?

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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;
  }
}
about 4 years ago · Santiago Trujillo Relatório

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.

about 4 years ago · Santiago Trujillo Relatório

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;
    }
 }
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda