::-ms-fill

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The ::-ms-fill CSS pseudo-element is a Microsoft extension that represents a progress bar displayed by <progress>. This pseudo-element is available only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge.

All allowable properties except animation-name apply to a determinate progress bar. Only animation-name applies to an indeterminate one. (A progress bar is determinate if it has a value attribute set; otherwise it is indeterminate. An indeterminate progress bar can be selected with the :indeterminate pseudo-class.)

By default, Internet Explorer and Edge display a moving dots animation for an indeterminate progress bar. By setting animation-name on ::-ms-fill, you can change the animation, as shown in this table:

Value Description
none Turns off the animation so that no dots are displayed.
-ms-bar Shows animated dots that flow in a bar pattern.
-ms-ring Shows animated dots that flow in a ring pattern.

Allowable Properties

Only the following CSS properties can be used in a rule with ::-ms-fill in its selector. Other properties are ignored.

Syntax

  ::-ms-fill

Example

HTML

<progress value="10" max="50"></progress>

CSS

progress::-ms-fill {
  background-color: orange;
}

Result

A progress bar using this style might look something like this:

A progress bar with its progress indicator colored orange.

Browser compatibility

Historically supported in Internet Explorer and Edge before version 79.

Specifications

Not part of any specification.

See also