Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 395581 of ::-moz-progress-bar

  • Revision slug: Web/CSS/::-moz-progress-bar
  • Revision title: ::-moz-progress-bar
  • Revision id: 395581
  • Created:
  • Creator: Sheppy
  • Is current revision? Yes
  • Comment 5 words added, 1 words removedCSS/::-moz-progress-bar Web/CSS/::-moz-progress-bar

Revision Content

{{ CSSMozExtensionRef() }}

Summary

The ::-moz-progress-bar pseudo-element applies to the area of an HTML {{ HTMLElement("progress") }} element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.

You have pretty broad capabilities to style the bar. This can be especially useful with indeterminate bars (via the {{ cssxref(":indeterminate") }} pseudo-class), where you may wish to substantially change the default appearance; you can change the width and positioning of the bar, for example. (By which we probably mean the whole element's dimensions and position, not just the painted part of the element, as featured in the screen shot below.)

Examples

This example styles the progress meter portion of the progress bar with ID redbar with the color red.

#redbar::-moz-progress-bar {
  background-color: red;
}

A bar using this style might look something like this:

redbar.png

See also

  • {{ HTMLElement("progress") }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 id="Summary">Summary</h3>
<p>The<code> ::-moz-progress-bar</code> pseudo-element applies to the area of an HTML {{ HTMLElement("progress") }} element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.</p>
<p>You have pretty broad capabilities to style the bar. This can be especially useful with indeterminate bars (via the {{ cssxref(":indeterminate") }} pseudo-class), where you may wish to substantially change the default appearance; you can change the width and positioning of the bar, for example. (By which we probably mean the whole element's dimensions and position, not just the painted part of the element, as featured in the screen shot below.)</p>
<h3 id="Examples">Examples</h3>
<p>This example styles the progress meter portion of the progress bar with ID <code>redbar</code> with the color red.</p>
<pre class="brush: css">#redbar::-moz-progress-bar {
  background-color: red;
}</pre>
<p>A bar using this style might look something like this:</p>
<p><img alt="redbar.png" class="internal default" src="/@api/deki/files/5387/=redbar.png"></p>
<h2 id="See_also">See also</h2>
<ul> <li>{{ HTMLElement("progress") }}</li>
</ul>
Revert to this revision