I am have this custom loading indicator
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