How to hide spinner background for Custom loader!

I am have this custom loading indicator :slight_smile:

   presentLoadingCustom() {
      let loading = this.loadingCtrl.create({
        spinner: 'hide',
        content: `<div class="cssload-container">
                  <div class="cssload-whirlpool"></div>
              </div>`,
        cssClass: 'loader'
      });

       loading.present();
       return loading;
   } 

SCSS:

   .loader {
      .cssload-container{
        position:relative;
       }

      .cssload-whirlpool,
      .cssload-whirlpool::before,
      .cssload-whirlpool::after {
 	position: absolute;
        top: 50%;
        left: 50%;
        border: 2px solid rgb(204,204,204);
        border-left-color: rgb(0,0,0);
        border-radius: 1748px;
	-o-border-radius: 1748px;
	-ms-border-radius: 1748px;
	-webkit-border-radius: 1748px;
	-moz-border-radius: 1748px;
      }

      .cssload-whirlpool {
        margin: -44px 0 0 -44px;
        height: 88px;
        width: 88px;
        animation: cssload-rotate 1150ms linear infinite;
	-o-animation: cssload-rotate 1150ms linear infinite;
	-ms-animation: cssload-rotate 1150ms linear infinite;
	-webkit-animation: cssload-rotate 1150ms linear infinite;
	-moz-animation: cssload-rotate 1150ms linear infinite;
      }

      .cssload-whirlpool::before {
        content: "";
        margin: -40px 0 0 -40px;
        height: 77px;
        width: 77px;
        animation: cssload-rotate 1150ms linear infinite;
	-o-animation: cssload-rotate 1150ms linear infinite;
	-ms-animation: cssload-rotate 1150ms linear infinite;
	-webkit-animation: cssload-rotate 1150ms linear infinite;
	-moz-animation: cssload-rotate 1150ms linear infinite;
       }

       .cssload-whirlpool::after {
          content: "";
         margin: -51px 0 0 -51px;
         height: 98px;
         width: 98px;
        animation: cssload-rotate 2300ms linear infinite;
	-o-animation: cssload-rotate 2300ms linear infinite;
	-ms-animation: cssload-rotate 2300ms linear infinite;
	-webkit-animation: cssload-rotate 2300ms linear infinite;
	-moz-animation: cssload-rotate 2300ms linear infinite;
        }



       @keyframes cssload-rotate {
              100% {
	        transform: rotate(360deg);
            }
         }

      @-o-keyframes cssload-rotate {
             100% {
	        -o-transform: rotate(360deg);
             }
       }

       @-ms-keyframes cssload-rotate {
           100% {
	       -ms-transform: rotate(360deg);
           }
       }

       @-webkit-keyframes cssload-rotate {
          100% {
	       -webkit-transform: rotate(360deg);
         }
       }

      @-moz-keyframes cssload-rotate {
          100% {
	      -moz-transform: rotate(360deg);
         }
     }
  }

Even though spinner: 'hide' but still there is box in the background of the custom loading indicator…how do I get rid of it, thanx

image

HI, maybe u should add this

   .loading-wrapper{
      background-color:transparent;
    }

inside your .loader class if you want to hide spinner background, thanks :slight_smile:

Hope this helps to you: https://stackoverflow.com/a/47839327/1077309