---
title: <progress>
slug: Web/HTML/Element/progress
tags:
  - Element
  - HTML
  - HTML forms
  - HTML5
  - Reference
  - Web
translation_of: Web/HTML/Element/progress
---
<h2 id="Sumari">Sumari</h2>

<p>L'<strong>Element HTML <code>&lt;progress&gt;</code></strong> s'utilitza per veure l'avenç de realització d'una tasca. Encara que els detalls de com es visualitza es deixa en mans del desenvolupador del navegador, normalment es mostra com una barra de progrés. Es pot utilitzar Javascript  per manipular el valor de la barra de progrés.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut dinàmic</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, contingut etiquetable, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, <span id="result_box" lang="ca"><span>però</span> <span>no ha d'haver</span> <span>cap element</span></span> <code>&lt;progress&gt;</code> <span id="result_box" lang="ca"><span>entre els seus</span> <span>descendents.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLProgressElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{ htmlattrdef("max") }}</dt>
 <dd>Aquest atribut descriu la quantitat de treball que requereix la tasca indicada per l'element <code>progress</code>. L'atribut <code>max</code>, si està present, ha de tenir un valor més gran que zero i ser un nombre de coma flotant vàli</dd>
 <dt>{{ htmlattrdef("value") }}</dt>
 <dd>Aquest atribut especifica quina part de la tasca s'ha completat. Ha de ser un nombre de coma flotant vàlid entre 0 i <code>max</code>, o entre 0 i 1 si s'omet <code>max</code>. Si no hi ha cap atribut <code>value</code>, la barra de progrés és indeterminada; això indica que una activitat està en curs sense cap indicació de quant temps s'espera que prengui.</dd>
</dl>

<p>Es pot utilitzar la propietat {{ cssxref("-moz-orient") }} per especificar si la barra de progrés es presentarà horitzontalment (per defecte) o verticalment. La pseudo-classe {{ cssxref(":indeterminate") }} es pot utilitzar per a que coincideixi amb barres de progrés indeterminades.</p>

<dl>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p>

<p>A Mac OS X, <span id="result_box" lang="ca"><span>el resultat del </span></span><span lang="ca"><span>progress</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>

<p><img alt="The progress bar seen in OS X Mavericks" class="default internal" src="https://mdn.mozillademos.org/files/6863/Screenshot%202014-01-30%2011.14.30.png" style="height: 24px; width: 167px;"></p>

<p><span id="result_box" lang="ca"><span>A Windows 7, el resultat del </span></span><span lang="ca"><span>progress</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>

<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p>

<h3 id="Exemples_addicionals">E<span class="short_text" id="result_box" lang="ca"><span>xemples</span> <span>addicionals</span></span></h3>

<p>Veure {{ cssxref("-moz-orient") }}.</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-progress-element', '&lt;progress&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>6.0</td>
   <td>{{ CompatGeckoMobile("6.0") }} [1] [2]<br>
    {{ CompatGeckoMobile("14.0")}} [2]</td>
   <td>10</td>
   <td>11.0</td>
   <td>5.2</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatGeckoMobile("6.0") }} [1] [2]<br>
    {{ CompatGeckoMobile("14.0")}} [2]</td>
   <td>{{ CompatNo() }}</td>
   <td>11.0</td>
   <td>7 [3]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Abans de Gecko 14,0 {{geckoRelease ("14.0")}}, l'element &lt;progrés&gt; va ser classificat erròniament com un element de formulari, i per tant tenia una atribut <code>form</code>. Això s'ha solucionat.</p>

<p>[2] Gecko proporciona el pseudo-element {{ cssxref("::-moz-progress-bar") }}, que permet que l'estil de la part interior de la barra de progrés representi la quantitat de treball realitzat fins al moment.</p>

<p>[3] Safari en iOS no és compatible amb les barres de progrés indeterminades (es representen com barres de progrés completades en 0%).</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li>{{ cssxref(":indeterminate") }}</li>
 <li>{{ cssxref("-moz-orient") }}</li>
 <li>{{ cssxref("::-moz-progress-bar") }}</li>
 <li>{{ cssxref("::-ms-fill") }}</li>
 <li>{{ cssxref("::-webkit-progress-bar") }}</li>
 <li>{{ cssxref("::-webkit-progress-value") }}</li>
 <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
</ul>

<p>{{ HTMLRef }}</p>