How can I put an activity indicator as overlay


#1

Hi, I’m trying to put an activity indicator as an overlay in a page with a background image, I have the next structure for the page:

<GridLayout row="*">
        <ActivityIndicator rowSpan="1" [busy]="loader" color="red"></ActivityIndicator>
        <StackLayout row="0" class="background" [ngClass]="{'inactive': loader}" id="backgroundGrid" backgroundImage="res://fundo">
// Some elements here
        </StackLayout>
</GridLayout>

The code to change the status of the loader property is the next:

this.loader = false;
 this.router.events.subscribe((event) => {
            if (event instanceof NavigationStart) {
                this.loader = true;
            }
            if (event instanceof NavigationEnd) {
                this.loader = false;
            }
        });

And the css I have:

.inactive {
    opacity: 0.5;
}
.background {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

However, the activity indicator is not showed anywhere in the page. Any help is appreciated!


#2

It could be easier and light weight if you use native progress dialog.

You may try this plugin which does more or less similar job