---
title: '::-moz-progress-bar'
slug: 'Web/CSS/::-moz-progress-bar'
tags:
  - CSS
  - CSS Referenz
  - NeedsCompatTable
  - NeedsLiveSample
  - Non-standard
translation_of: 'Web/CSS/::-moz-progress-bar'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Das <code>::-moz-progress-bar</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> betrifft den Bereich eines HTML {{HTMLElement("progress")}} Elements, der den erreichten Fortschritt darstellt. Dies erlaubt es beispielsweise, die Farbe von Fortschrittsbalken ändern.</p>

<p>Die Möglichkeiten, den Stil des Balkens anzupassen, sind recht groß. Dies kann besonders für unbestimmte Balken nützlich sein (über die {{cssxref(":indeterminate")}} <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>), bei denen es möglich ist, die Darstellung grundlegend zu ändern; es können z. B. die Breite und die Positionierung des Balkens verändert werden. (Was die gesamten Ausmaße des Elements und seine Position meint, nicht nur den gefüllten Teil des Elements, wie im Screenshot unten verdeutlicht.)</p>

<h2 id="Beispiele">Beispiele</h2>

<p>Dieses Beispiel gestaltet den Fortschrittszähler des Fortschrittbalkens mit der ID <code>redbar</code> in rot.</p>

<pre class="brush: css">#redbar::-moz-progress-bar {
  background-color: red;
}</pre>

<p>Ein Balken, der diesen Stil verwendet, könnte so aussehen:</p>

<p><img alt="Benutzerdefiniert gestalteter Fortschrittsbalken" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{HTMLElement("progress")}}</li>
</ul>