We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 and Internet Explorer 11.

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.

All allowable properties except animation-name apply to  a determinate progress bar. Only animation-name applies to an indeterminate one.

By default, Internet Explorer displays a moving dots animation for an indeterminate progress bar. By setting animation-name on ::-ms-fill, you can change the animation, as shown in the 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">

CSS

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

Result

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

Progress Bar with Orange Fill

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support (Yes) No support 10.0 No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support (Yes) No support ? No support No support

Specifications

Not part of any specification.

See also

Document Tags and Contributors

Last updated by: jameshkramer,