Share via

How to style progress controls (HTML)

  • Article

[ 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 ]

Learn how to use Cascading Style Sheets (CSS) and the Windows Library for JavaScript style sheets to style progress controls.

What you need to know

Technologies

Prerequisites

  • We assume that you know how to create the three different types of progress control: the determinate progress bar, the indeterminate progress bar, and the indeterminate progress ring. To learn about adding the different types of progress controls, see Quickstart: Adding progress controls.

Useful CSS properties

These CSS properties are particularly useful for styling the progress control:

  • width
    Specifies the width of the progress control. For an indeterminate progress ring, the width and height should be the same.

  • height
    Specifies the height of the progress control. For an indeterminate progress ring, the width and height should be the same.

  • color
    Specifies the color of the bar portion of the determinate progress bar, and the color of the dots in the indeterminate progress bar and the indeterminate progress ring.

    This example creates a determinate progress bar that has a blue bar.

    <progress value="0.4" style="color: blue"  />

Pseudo-elements for styling progress controls

The progress control provides these pseudo-elements that you can use as selectors to style specific portions of the control:

  • ::-ms-fill
    Applies one or more styles to the bar portion of determinate progress controls, and specifies the animation of the indeterminate progress controls.

    All styles are applied to the bar portion of the determinate progress bar, except for the animation-name style property, which controls the animation of the indeterminate progress bar and ring.

    This example makes a progress control appear as an intermediate progress ring.

    

/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }

(For more info about the different ways you can combine pseudo-elements and other selectors, see Understanding CSS selectors.)

Pseudo-classes for styling progress controls

This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.

  • :indeterminate
    Applies one or more styles to a progress control in the indeterminate state.

    This example defines a style for indeterminate progress controls.

    
progress:indeterminate {
    /* styling here */
}

(For more info about the different ways you can combine pseudo-classes and other selectors, see Understanding CSS selectors.)

WinJS CSS classes for styling progress controls

The WinJS provides several CSS classes for styling the progress control.

To use these classes, set the control's class attribute to the name of the class. You can assign multiple classes to an element; just separate class names with a space. This example applies the win-ring and win-large classes to a progress control.

<progress class="win-ring win-large" />

The WinJS provides these CSS classes for styling the progress control:

  • win-error
    Pauses a determinate progress bar and displays it in the error style.

  • win-large
    Makes the progress control large. Use this style for full-screen modal operations.

  • win-medium
    Makes the progress control medium-sized. If you're displaying a progress ring next to 20-point text, use this class.

  • win-paused
    Pauses the progress of a determinate progress bar.

  • win-ring
    Displays the progress control as an indeterminate progress ring. You must specify the width and height of the progresscontrol by setting the width and height properties or by using the win-medium or win-large class.

Quickstart: Adding progress controls

Guidelines and checklist for progress controls

Understanding CSS selectors