Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to style progress controls (HTML)

Applies to Windows and Windows Phone

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.

Related topics

Quickstart: Adding progress controls
Guidelines and checklist for progress controls
Understanding CSS selectors

 

 

Show:
© 2014 Microsoft