Displaying progress and activity indicators

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Keep your users informed when your app is busy with progress bars and spinning activity dots.

UIActivityIndicatorView and UIProgressView are the iOS controls you may have used to keep your users informed when your app is busy. When writing Windows Store apps using XAML, you should use the ProgressRing and ProgressBar controls to do much the same thing.

In this image, the iOS controls are on the left, and the Windows 8 controls are on the right.

When writing apps in JavaScript the WinJS <progress> control can be used instead.

Using the XAML ProgressRing control

The ProgressRing control consists of a series of rotating dots, and you should use this when there is a short delay of indeterminate length – for example, when negotiating a network connection. The ProgressRing can be added to your XAML page or created programmatically at run-time, and then activated by setting the IsActive property. You are free to change the color of the control to suit the theme of your application, by altering its brush property.

<ProgressRing x:Name="ring" Foreground="Red" Width="100" Height="100" />

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Toggle on/off the ProgressRing

            if (ring.IsActive)
                ring.IsActive = false;
            else
                 ring.IsActive = true;
        }

Using the XAML ProgressBar control

The ProgressBar control consists of a simple horizontal bar that fills with color as a process works towards completion. It’s up to you to keep changing the value of the bar as your app's code runs. Unlike iOS, there is no need to worry about updating the animation on the main thread: simply change the value property at any time, and the bar's appearance will be updated. The default range is set at 0 to 100.

<ProgressBar x:Name="bar"  Height="20"  Width="200" Background="lightBlue" />

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Increase the progress bar's value

            double progress = bar.Value;
            progress += 5;
            bar.Value = progress;
        }

The ProgressBar has an alternative look, which is useful when, like the ProgressRing, you don't know how long a process is going to take. Simply add IsIndeterminate="True" to the declaration, and an animated line of dots will be displayed instead.

<ProgressBar x:Name="bar" IsIndeterminate="True"  Height="20"  Width="200" Background="lightBlue" />

Using the WinJS Progress control

The WinJS <progress> control contains three controls in one: an indeterminate progress ring (like the XAML ProgressRing), a determinate progress bar (like the XAML ProgressBar), and an indeterminate progress bar (an animated line of dots). You can select the control you want by adding extra information to the declaration, like this:

Control	Type	Appearance
<progress class="win-ring"/>	Indeterminate Progress Ring
<progress value="50" max="100"/>	Determinate Progress Bar
<progress/>	Indeterminate Progress Bar

 

You can also place the <progress> tag inside a <label> tag to add text, like this:

<label>
    <progress id="myProgressRing" class="win-ring" style="width:50px; height:50px"></progress>
    Processing..
</label>

To change the amount of progress in the determinant progress bar, use some JavaScript code like this:

function increaseProgress()
{
    var progressBar = document.getElementById("MyProgressBar");
    progressBar.value += 10;
};

To show and hide these WinJS controls, use the style.visibility property, like this:

function toggleProgressRing()
{
    var progressRing = document.GetElementById("myProgressRing");

    if (progressRing.style.visibility == "hidden")
        progressRing.style.visibility = "visible";
    else
        progressRing.style.visibility == "hidden";
}

Related topics

Guidance

Guidelines and checklist for progress controls (Windows Store apps)

XAML

Quickstart: adding progress controls (Windows Store apps using C#/VB/C++ and XAML)

Adding progress controls (Windows Store apps using C#/VB/C++ and XAML)

JavaScript

Quickstart: adding progress controls (Windows Store apps using JavaScript and HTML)

How to style progress controls (Windows Store apps using JavaScript and HTML)