Guillaume Duverger - Développement & Graphisme - Blog

L'élément progress

L'élément progress indique l'état d'avancement d'une tâche représenté par une barre de progression. Cet élément utilise les pourcentages de 0 à 100. Il comprend deux attributs :

1. Value : attribut qui désigne la valeur de l'état d'avancement de la tâche.
2. Max : attribut qui désigne la valeur maximale à atteindre.

A noter que la valeur minimale de l'élément progress est toujours 0. Il n'existe donc pas d'attribut min.

Ci-dessous, l'élément progress dans son affichage brut (varie selon les navigateurs, il s'agit d'un élément remplacé) avec une valeur de 50% :

L'élément progress se présente sous cette forme en HTML :

<progress max="" value=""></progress>

Attention toutefois en ce qui concerne la position verticale. On utilise ici la propriété -moz-orient (firefox) mais cette fonctionnalité n'est pas standard. Il ne vaut donc mieux pas la mettre en pratique.

Les utilisations de l'élément progress sont multiples comme par exemple la représentation de la progression dans le remplissage d’un formulaire ou du téléchargement d'un fichier.

Sachez, par ailleurs, qu'il existe la pseudo-classe :indeterminate permettant de cibler notamment l'élément progress :

Styler l'élément progress avec CSS :

Pour cela, il va falloir utiliser des pseudo-éléments qui ne sont pas standards.

En ce qui concerne le navigateur Firefox, on utilisera le pseudo-élément ::-moz-progress-bar.

Pour Chrome, il existe trois types de pseudo-éléments :

1. ::-webkit-progress-bar
2. ::-webkit-progress-value
3. ::-webkit-progress-inner-element

Il faudra ajouter la propriété -webkit-appearance avec la valeur none afin d'utiliser ces pseudo-éléments.

Il existe également un pseudo-élément pour Internet Explorer(10+)/Edge, en l'occurence ::-ms-fill.

progress::-webkit-progress-bar{}/*chrome*/
progress::-webkit-progress-value{}/*chrome*/
progress::-webkit-progress-inner-element{}/*chrome*/
progress::-moz-progress-bar{}/*firefox*/
progress::-ms-fill{}/*IE10+*/

Ci-dessous, l'élément progress stylisé avec du CSS :

<div class="exemple1">
<progress max="100" value="40"></progress>
</div>

.exemple1 progress{
appearance: none;
-webkit-appearance: none;
border: none;
height: 30px;
position: relative;
width: 100%

}     

.exemple1 progress::-webkit-progress-bar{

background-color:silver

}

.exemple1 progress::-webkit-progress-value {

background:linear-gradient(45deg,transparent 33%,hsla(0,0%,0%,.1) 33%, hsla(0,0%,0%,.1) 66%,transparent 66%);
background-color: purple;
background-size: 80px 40px

}

.exemple1 progress::-moz-progress-bar{

background:linear-gradient(45deg,transparent 33%,hsla(0,0%,0%,.1) 33%, hsla(0,0%,0%,.1) 66%,transparent 66%);
background-color: purple;
background-size:80px 40px

}

.exemple1 progress::-ms-fill{

background:linear-gradient(45deg,transparent 33%,hsla(0,0%,0%,.1) 33%, hsla(0,0%,0%,.1) 66%,transparent 66%);
background-color: purple;
background-size:80px 40px

} 

Animez l'élément progress avec CSS :

Ci-dessous, un exemple avec une animation CSS :

<div class="exemple2">
<span></span>
</div>

.exemple2{

height: 30px;
position: relative;
background-color: silver

}
    
.exemple2:before {

content:"80% chargé";
font-size:.875rem;
position:absolute;
text-align:right;
opacity:0;
top:5px;
animation: anim2-ex2 3s forwards;
left:0;
right:10%

}
    
.exemple2 span {

display:block;
background-color: purple;
height:100%;
animation:anim-ex2 1s forwards

}
    
@keyframes anim-ex2{

from{

width:0%

}

to{

width:80%

}

}
@keyframes anim2-ex2{

to{

opacity:1

}

}

Un autre exemple, cette fois-ci non pas avec une animation CSS, mais avec une simple transition CSS :

<input type="radio" class="radio" id="lance">
<label for="lance" class="label">Lancer le téléchargement</label>
<div class="progress">
<div class="progress-bar"></div>
</div>    

.progress{

background-color: hsla(0,0%,0%,.25)

}

.progress-bar{

width: 0;
height: 30px

}

#lance:checked ~ .progress > .progress-bar {

width: 100%;
transition: width 3s ease;
background-color: purple

}

Animez l'élément progress avec JavaScript :

Exemple 1 :

<script>var i = 0;    
var barre = document.getElementById('barre');  
var avancement = document.getElementById('avancement');
 
function StartProgress(){
  MyTimeOut = setTimeout('Progress()', 500);
}
 
function Progress(){ 
  i += 5;
  if(i <= barre.max){
     barre.value = i;
     avancement.innerHTML = i.toString() + ' %';
     MyTimeOut = setTimeout('Progress()', 500);
  }
}</script>  

Exemple 2 :

Avancement de la tâche à effectuer :

<script>function avancement() {
		var ava = document.getElementById("avancement1");
		var prc = document.getElementById("pourcentage");
		prc.innerHTML = ava.value + "%";
	}
	
	avancement();
	
	function modif(val) {
		var ava = document.getElementById("avancement1");
		if((ava.value+val)<=ava.max && (ava.value+val)>=0) {
			ava.value += val;
		}
		avancement();
	}</script>  

L'élément meter

L'élément meter représente une jauge qui va mesurer une valeur comprise entre un minimum et un maximum. Celui-ci est surtout destiné à indiquer un état, stable ou pouvant évoluer, au cours du temps. Contrairement à l'élément progress, il est possible d'utiliser des valeurs négatives.

L'élément meter comprend six attributs :

1. Value : attribut obligatoire représentant la valeur courante de la mesure.
2. Min : représente la valeur minimale de la mesure par le biais d'un nombre à virgule. Dans le cas où la valeur n'est pas valide ou si l'attribut min n'est pas défini, la valeur par défaut sera : 0.0.
3. Max : représente la valeur maximale de la mesure par le biais d'un nombre à virgule. Dans le cas où la valeur n'est pas valide ou si l'attribut max n'est pas défini, la valeur par défaut sera : 1.0.
4. Low : représente la valeur de la mesure qui est considérée comme basse. Renseigné par un nombre à virgule compris entre les valeurs des attributs min et max, cet attibut doit être plus petit que l'attribut hight (si celui-ci est défini).
5. High : représente la valeur de la mesure qui est considérée comme haute. Renseigné par un nombre à virgule compris entre les valeurs des attributs min et max, cet attibut doit être plus grand que l'attribut low (si celui-ci est défini).
6. optimum : représente la mesure où la valeur de la jauge par le biais d'un nombre à virgule compris entre les valeurs des attributs min et max, est considérée comme une valeur optimale.

Les possibilités sont nombreuses : sondage, résultat d'examens, espace d'un disque...

Ci-dessous, l'élément meter dans sa forme brute (varie selon le navigateur) :

L'élément meter se présente sous cette forme en HTML :

<meter max="" value="" title=""></meter>

Styler l'élément meter avec CSS

Exemple : espace disque dur

NB : Firefox et Edge ne prennent pas en compte les pseudo-éléments ::before et ::after.

<meter min="23.9" max="83.3" value="59.4" class=exemple1_meter></meter>

.exemple1_meter {

margin:2rem auto;
display:flex;
width:18rem;
position:relative;

/*firefox*/

background:none;
background-color: silver;

/*firefox*/

}


/*firefox*/
.exemple1_meter::-moz-meter-bar{

background: none;
background-color: hsl(102,100%,42%)

}



.exemple1_meter::before{

content: 'Disque local (C:)';
position: absolute;
top: -120%;
left: 0

}

.exemple1_meter::after{
content: '23,9 Go libres sur 83,3 Go';
position: absolute;
top: 100%;
left: 0

}
    
/*chrome*/	
	
.exemple1_meter::-webkit-meter-bar{

background: none; 
background-color: silver;
border-radius: 0;
border: 0;

}
	
.exemple1_meter::-webkit-meter-inner-element {
    
	display: flex !important;
    
}	
    
.exemple1_meter::-webkit-meter-optimum-value{

background: none;
background-color: hsl(102,100%,42%)


}

Pour résoudre le problème de la non-prise en charge des pseudo-éléments, nous allons simplement envelopper l'élément meter d'un élément div et placer nos informations.

<div class=exemple2-meter>
<span>Disque local (C:)</span>
<meter min="23.9" max="83.3" value="59.4" class=exemple2_meter></meter>	
<span>23,9 Go libres sur 83,3 Go</span>
</div>

.exemple2-meter {

margin:2rem auto;
place-content:center;
display:grid;
grid-template-rows: 1fr 16px 1fr;


}

.exemple2-meter meter{

width:18rem;
background:none;
background-color: silver 

}
		
.exemple2_meter::-moz-meter-bar{
	
background:none;
background-color:hsl(102,100%,42%)}
		
		
		
.exemple2_meter::-webkit-meter-bar{
background:none; 
background-color: silver;
border-radius:0;
border:0;

}
	
.exemple2_meter::-webkit-meter-inner-element {
    
	display: flex !important;
    
}	
    
.exemple2_meter::-webkit-meter-optimum-value{

background:none;
background-color:hsl(102,100%,42%)

}