How can I put an activity indicator as overlay


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

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

this.loader = false; => {
            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!


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