How to style progress controls (HTML)
- 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.
These CSS properties are particularly useful for styling the progress control:
Specifies the width of the progress control. For an indeterminate progress ring, the width and height should be the same.
Specifies the height of the progress control. For an indeterminate progress ring, the width and height should be the same.
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.
The progress control provides these pseudo-elements that you can use as selectors to style specific portions of the control:
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.
(For more info about the different ways you can combine pseudo-elements and other selectors, see Understanding CSS selectors.)
This control supports the following pseudo-classes that you can use as selectors to style the control when it’s in certain states.
Applies one or more styles to a progress control in the indeterminate state.
This example defines a style for indeterminate progress controls.
(For more info about the different ways you can combine pseudo-classes and other selectors, see Understanding CSS selectors.)
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.
The WinJS provides these CSS classes for styling the progress control:
Pauses a determinate progress bar and displays it in the error style.
Makes the progress control large. Use this style for full-screen modal operations.
Makes the progress control medium-sized. If you're displaying a progress ring next to 20-point text, use this class.
Pauses the progress of a determinate progress bar.
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