How the Progress Indicator Works

In short, this is how to get the progress indicator to work:

1. Add activity indicator to the page.
2. Bind the IsBusy and IsRunning property to view model.
3. Set a property to turn on activity indicator.
4. Set a property to switch it off.

Adding Progress Indicator to a Page

I suppose you already have a view model that implements INotifyPropertyChanged. Add the following property to view model.

private bool _isLoading;
public bool IsLoading
{
    get { return _isLoading; }
    set
    {
        _isLoading = value;
        OnPropertyChanged();
    }
}

Set this property to true or false in the data loading methods. One example is here:

public void LoadData()
{
    IsLoaded = true;       // load and process data

    IsLoaded = false;
}

Next, let’s add the activity indicator to the page.

<ActivityIndicator 
    IsVisible="{Binding IsBusy}" 
    IsRunning="{Binding IsBusy}" />

As we haven't specified anything about design, the activity indicator will be rendered using default settings.

This is how the activity indicator looks on UWP, Android, and Tizen.

Wrapping Up

Xamarin Forms has a progress indicator, but it is called the activity indicator. It can be bound to the view model; this way it is easy to turn it on and off. Here, we didn’t make any improvements to its design and the indicator still looks okay on different platforms.