<progress>

  • Raccourci de la révision : Web/HTML/Element/Progress
  • Titre de la révision : <progress>
  • ID de la révision : 479553
  • Créé :
  • Créateur : Goofy
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ HTMLVersionHeader(5) }}

Résumé

L'élément HTML est utilisé pour visualiser l'avancement d'une tâche. Les spécificités de l'affichage sont gérées par le navigateur. Dans la majeure partie des cas, le navigateur affiche une barre de progression.

Attributs

Cet élément inclut les attributs globaux.

{{ htmlattrdef("max") }}
Cet attribut décrit le niveau maximal de progression à atteindre pour compléter une tâche.
{{ htmlattrdef("value") }}
Cet attribut définit le niveau de progression actuel (autrement dit, quelle fraction de la tâche a été effectuée). Il doit être compris entre 0 et max, ou entre 0 et 1.0 si max n'est pas utilisé. S'il n'y a pas d'attribut value, la barre de progression est indéterminée. Cela indique qu'une activité est en cours, sans pouvoir renseigner sur le temps qui reste jusqu'à sa complétion.

Vous pouvez utiliser la propriété CSS {{ cssxref("orient") }} pour spécifier si la barre de progression doit être dessinée horizontalement (le comportement par défaut) ou verticalement. La pseudo-classe {{ cssxref(":indeterminate") }} peut être utilisée pour manipuler les barres de progression indéterminées.

Exemple

<progress value="70" max="100">70 %</progress>

Résultat

{{ EmbedLiveSample("Exemple", 200, 50) }}

Sur Mac OS X, l'élément résultant ressemble à ceci :

progress-1.png

Sur Windows, il ressemble à cela :

progress-firefox.JPG

Exemples supplémentaires

Voir {{ cssxref("orient") }}.

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'the-button-element.html#the-progress-element', '<progress>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-progress-element.html#the-progress-element', '<progress>')}} {{Spec2('HTML5 W3C')}}

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 6.0 {{ CompatGeckoDesktop("6.0") }} [1][2] 10 11.0 5.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple {{ CompatNo() }} {{ CompatGeckoMobile("6.0") }} [1][2] {{ CompatNo() }} 11.0 {{ CompatNo() }}

Notes relatives à Gecko

[1] Gecko fournit le pseudo-élément {{ cssxref("::-moz-progress-bar") }}. Il permet de définir l'apparence de l'intérieur de la barre de progression (représentant la fraction de la tâche qui a été effectuée jusqu'à présent).

[2] Avant Gecko 14.0 {{ geckoRelease("14.0") }}, l'élément <progress> était classé, de manière incorrecte, comme un élément de formulaire. , il avait donc un attribut form. Ce problème a été résolu.

Voir également

  • {{ cssxref("orient") }}
  • {{ cssxref(":indeterminate") }}

{{ HTML:Element_Navigation() }}

Source de la révision

<div>
  {{ HTMLVersionHeader(5) }}</div>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'<strong>élément HTML<em> </em><code><progress></code></strong> est utilisé pour visualiser l'avancement d'une tâche. Les spécificités de l'affichage sont gérées par le navigateur. Dans la majeure partie des cas, le navigateur affiche une barre de progression.</p>
<ul class="htmlelt">
  <li><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu&nbsp;</a></dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">contenu phrasé</a>, contenu étiquetable, contenu palpable.</li>
  <li><dfn>Contenu autorisé </dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">Contenu phrasé</a> tant que celui-ci n'a pas d'élément <code>&lt;progress&gt;</code> parmi ses descendants.</li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés</dfn>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">contenu phrasé</a>.</li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLProgressElement")}}</li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes" title="HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
  <dt>
    {{ htmlattrdef("max") }}</dt>
  <dd>
    Cet attribut décrit le niveau maximal de progression à atteindre pour compléter une tâche.</dd>
  <dt>
    {{ htmlattrdef("value") }}</dt>
  <dd>
    Cet attribut définit le niveau de progression actuel (autrement dit, quelle fraction de la tâche a été effectuée). Il doit être compris entre 0 et <code>max</code>, ou entre 0 et 1.0 si <code>max</code> n'est pas utilisé. S'il n'y a pas d'attribut <code>value</code>, la barre de progression est indéterminée. Cela indique qu'une activité est en cours, sans pouvoir renseigner sur le temps qui reste jusqu'à sa complétion.</dd>
</dl>
<p>Vous pouvez utiliser la propriété CSS {{ cssxref("orient") }} pour spécifier si la barre de progression doit être dessinée horizontalement (le comportement par défaut) ou verticalement. La pseudo-classe {{ cssxref(":indeterminate") }} peut être utilisée pour manipuler les barres de progression indéterminées.</p>
<dl>
</dl>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: html">
&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
</pre>
<h3 id="R.C3.A9sultat">Résultat</h3>
<p>{{ EmbedLiveSample("Exemple", 200, 50) }}</p>
<p>Sur Mac OS X, l'élément résultant ressemble à ceci :</p>
<p><img alt="progress-1.png" class="internal default" src="/@api/deki/files/4946/=progress-1.png" style="" /></p>
<p>Sur Windows, il ressemble à cela :</p>
<p><img alt="progress-firefox.JPG" class="internal default" src="/@api/deki/files/6031/=progress-firefox.JPG" /></p>
<h3 id="Exemples_suppl.C3.A9mentaires">Exemples supplémentaires</h3>
<p>Voir {{ cssxref("orient") }}.</p>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</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>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-progress-element.html#the-progress-element', '&lt;progress&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>6.0</td>
        <td>{{ CompatGeckoDesktop("6.0") }} [1][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>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("6.0") }} [1][2]</td>
        <td>{{ CompatNo() }}</td>
        <td>11.0</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes_relatives_.C3.A0_Gecko">Notes relatives à Gecko</h3>
<p>[1] Gecko fournit le pseudo-élément {{ cssxref("::-moz-progress-bar") }}. Il permet de définir l'apparence de l'intérieur de la barre de progression (représentant la fraction de la tâche qui a été effectuée jusqu'à présent).</p>
<p>[2] Avant Gecko 14.0 {{ geckoRelease("14.0") }}, l'élément <code>&lt;progress&gt;</code> était classé, de manière incorrecte, comme un élément de formulaire. , il avait donc un attribut <code>form</code>. Ce problème a été résolu.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ cssxref("orient") }}</li>
  <li>{{ cssxref(":indeterminate") }}</li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
Revenir à cette révision