CODEWITHSUNDEEP
htmlcssangularsassionic2
Richard
Richard

Reputation: 8945

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?

Upvotes: 7

Views: 16421

Answers (5)

Roberto Carlos Saldvar
Roberto Carlos Saldvar

Reputation: 1

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

Upvotes: 0

Marina Osama
Marina Osama

Reputation: 61

// 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;

    }
}

Upvotes: 0

Leonardo Nomdedeu
Leonardo Nomdedeu

Reputation: 861

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;
    }
 }

Upvotes: 4

Tiep Phan
Tiep Phan

Reputation: 12596

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;
  }
}

Upvotes: 13

tnc1997
tnc1997

Reputation: 1962

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.

Upvotes: 9

Related Questions