Modèle:Avancement

Le modèle {{Avancement}} permet d’afficher une barre de progression calibrée de 0 à 100 %, idéale pour afficher :

• les résultats d’un sondage ;
• l’état d’avancement d'une traduction ;
• etc.

Il peut être utilisé dans un tableau pour ajouter des commentaires, avant ou après le modèle.

Vous pouvez placer ce modèle n’importe où, en utilisant les deux syntaxes suivantes.

La syntaxe simple permet d’utiliser rapidement le modèle. Les paramètres doivent être spécifiés dans un ordre précis.

• syntaxe minimale :

{{avancement|25}} donne :

{{avancement|40}} donne :

etc.

• syntaxe simple :

{{avancement|''avancement''|couleur|fond|barre|texte|alt|inv|inline}}

Le paramètre avancement est un nombre de 0 à 100. Le séparateur décimal éventuel doit être un point au lieu de la virgule habituelle : n'écrivez pas 23,9 mais 23.9

Consultez les exemples d’utilisation pour comprendre l’utilisation de cette syntaxe.

La syntaxe complexe permet d’éviter l’utilisation des caractères « | » et peut s’avérer plus facile d’utilisation dans certains cas de barre de progression complexes. En remplissant chaque champ connu (après le signe « = ») avec la valeur adaptée. Seul le premier paramètre est obligatoire, les autres paramètres sont optionnels et ont une valeur par défaut.

{{Avancement
| avancement=
| couleur=
| fond=
| barre=
| texte=
| alt=
| inv=
| inline=
}}

La signification des paramètres est la suivante :

{{Avancement|''avancement''|couleur|fond|barre|texte|alt|inv|inline}}

• Barre simple (dégradé par défaut) :
  • {{Avancement|25}}
    25 %
  • {{Avancement|46}}
    46 %
  • {{Avancement|77}}
    77 %
• Paramètre couleur de barre spécifié :
  • {{Avancement|75|lightgreen}}
    75 %
  • {{Avancement|75|#8080FF}}
    75 %
• Paramètre style de fond spécifié :
  • {{Avancement|75||border:0;}}
    75 %
  • {{Avancement|75||background-color:yellow;}}
    75 %
  • {{Avancement|75||margin-top:10px;margin-bottom:10px;}}
    75 %
• Paramètre style de la barre spécifié :
  • {{Avancement|75|||border-right:solid 2px red;}}
    75 %
  • {{Avancement|75|||border:solid 2px #FF8000;}}
    75 %
• Paramètre style du texte spécifié :
  • {{Avancement|75||||font-weight:bold;}}
    75 %
  • {{Avancement|75||||color:red;}}
    75 %
• Paramètre texte alternatif spécifié :
  • {{Avancement|25|||||¼ L}}
    ¼ L
  • {{Avancement|70|||||En cours}}
    En cours
• Paramètre d’inversion spécifié :
  • {{Avancement|25||||||1}}
    25 %
  • {{Avancement|75||||||1}}
    75 %
• Paramètre inline spécifié :
  • {{Avancement|50|||||||1}} Traduction effectuée à ██████████50 %
  • {{Avancement|100|||||||1}} Je suis d’accord à ██████████100 % !
• Exemple d’utilisation de multiples paramètres (style du texte, style de la barre et texte alternatif spécifiés) :
  • {{Avancement|50|||border:solid 1px black;|font-style:italic;|½ portion}}
    ½ portion

{{Avancement
| avancement=
| couleur=
| fond=
| barre=
| texte=
| alt=
| inv=
| inline=
}}

• Barre simple (dégradé par défaut) :
  • {{Avancement|avancement=25}}
    25 %
  • {{Avancement|avancement=46}}
    46 %
  • {{Avancement|avancement=77}}
    77 %
• Paramètre couleur de barre spécifié :
  • {{Avancement|avancement=75|couleur=lightgreen}}
    75 %
  • {{Avancement|avancement=75|couleur=#8080FF}}
    75 %
• Paramètre style de fond spécifié :
  • {{Avancement|avancement=75|fond=border:0;}}
    75 %
  • {{Avancement|avancement=75|fond=background-color:yellow;}}
    75 %
  • {{Avancement|avancement=75|fond=margin-top:10px;margin-bottom:10px;}}
    75 %
• Paramètre style de la barre spécifié :
  • {{Avancement|avancement=75|barre=border-right:solid 2px red;}}
    75 %
  • {{Avancement|avancement=75|barre=border:solid 2px #FF8000;}}
    75 %
• Paramètre style du texte spécifié :
  • {{Avancement|avancement=75|texte=font-weight:bold;}}
    75 %
  • {{Avancement|avancement=75|texte=color:red;}}
    75 %
• Paramètre texte alternatif spécifié :
  • {{Avancement|avancement=25|alt=¼ L}}
    ¼ L
  • {{Avancement|avancement=70|alt=En cours}}
    En cours
• Paramètre d’inversion spécifié :
  • {{Avancement|avancement=25|inv=1}}
    25 %
  • {{Avancement|avancement=75|inv=1}}
    75 %
• Paramètre inline spécifié :
  • {{Avancement|avancement=50|inline=1}} Traduction effectuée à ██████████50 %
  • {{Avancement|avancement=100|inline=1}} Je suis d’accord à ██████████100 % !
• Exemple d’utilisation de multiple paramètres (style du texte, style de la barre et texte alternatif spécifiés) :
  • {{Avancement|avancement=50|barre=border:solid 1px black;|texte=font-style:italic;|alt=½ portion}}
    ½ portion

Ce modèle peut être également personnalisable via le monobook CSS grâce aux deux classes suivantes :

#avance_boite { }
#avance_barre { }

Exemple d’utilisation :

#avance_boite
{
   width: 100px; // largeur de la boite
   background-color: lightgray; // couleur du fond
   border: solid 1px gray; // style, taille et couleur de la bordure
}
#avance_barre
{
   background-color: #A0FFA0; // couleur de la barre
   text-align: right; // alignement du texte
   font-size: 100%; // taille du texte
   font-weight: bold; // epaisseur du texte
}

Notez que cette personnalisation est inutile dans le cas de l’utilisation du paramètre inline.

• {{Progression}}
• {{0/4}}, {{1/4}}, {{2/4}}, {{3/4}}, {{4/4}}
• {{Barre de progression}}