Bootstrap - Barres de progression

Ce chapitre traite des barres de progression Bootstrap. L'objectif des barres de progression est de montrer que les éléments sont en cours de chargement, en cours ou que des mesures sont prises concernant les éléments de la page.

N.B : Les barres de progression utilisent les transitions et animations CSS3 pour obtenir certains de leurs effets. Ces fonctionnalités ne sont pas prises en charge dans Internet Explorer 9 et versions ultérieures de Firefox. Opera 12 ne prend pas en charge les animations.

Barre de progression par défaut :

Pour créer une barre de progression de base -

• Ajoutez un <div> avec une classe de .progress.

• Ensuite, à l'intérieur de la <div> ci-dessus, ajoutez un vide <div> avec une classe de .progress-bar.

• Ajoutez un attribut de style avec la largeur exprimée en pourcentage. Disons par exemple, style = "60%"; Indique que la barre de progression était de 60%.

<div class = "progress">

   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 

      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">

      <span class = "sr-only">40% Complete</span>

   </div>

</div>

Autre barre de progression

Pour créer une barre de progression avec différents styles -

• Ajoutez un <div> avec une classe de .progress.

• Ensuite, à l'intérieur de la <div> ci-dessus, ajoutez un vide <div> avec une classe de .progress-bar et class progress-bar- * où * pourrait être succès, info, warning, danger.

• Ajoutez un attribut de style avec la largeur exprimée en pourcentage. Disons par exemple, style = "60%"; Indique que la barre de progression était de 60%

<div class = "progress">

   <div class = "progress-bar progress-bar-success" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">

      <span class = "sr-only">90% Complete (Sucess)</span>

   </div>

</div>

<div class = "progress">

   <div class = "progress-bar progress-bar-info" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">

      <span class = "sr-only">30% Complete (info)</span>

   </div>

</div>

<div class = "progress">

   <div class = "progress-bar progress-bar-warning" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">

      <span class = "sr-only">20%Complete (warning)</span>

   </div>

</div>

<div class = "progress">

   <div class = "progress-bar progress-bar-danger" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">

      <span class = "sr-only">10% Complete (danger)</span>

   </div>

</div>

Barre de progression rayée

Pour créer une barre de progression rayée -

• Ajoutez un <div> avec une classe de .progress et .progress-striped.

• Ensuite, à l'intérieur de la <div> ci-dessus, ajoutez un vide <div> avec une classe de .progress-bar et class progress-bar- * où * pourrait être succès, info, warning, danger.

• Ajoutez un attribut de style avec la largeur exprimée en pourcentage. Disons par exemple, style = "60%"; Indique que la barre de progression était de 60%.

<div class = "progress progress-striped">

   <div class = "progress-bar progress-bar-success" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">

      <span class = "sr-only">90% Complete (Sucess)</span>

   </div>

</div>

<div class = "progress progress-striped">

   <div class = "progress-bar progress-bar-info" role = "progressbar"

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">

      <span class = "sr-only">30% Complete (info)</span>

   </div>

</div>

<div class = "progress progress-striped">

   <div class = "progress-bar progress-bar-warning" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">

      <span class = "sr-only">20%Complete (warning)</span>

   </div>

</div>

<div class = "progress progress-striped">

   <div class = "progress-bar progress-bar-danger" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">

      <span class = "sr-only">10% Complete (danger)</span>

   </div>

</div>

Barre de progression animée

Pour créer une barre de progression animée -

• Ajoutez un <div> avec une classe de .progress et .progress-striped. Ajoutez aussi la classe .active à .progress-striped.

• Ensuite, à l'intérieur de la <div> ci-dessus, ajoutez un vide <div> avec une classe de .progress-bar.

• Ajoutez un attribut de style avec la largeur exprimée en pourcentage. Disons par exemple, style = "60%"; Indique que la barre de progression était de 60%.

<div class = "progress progress-striped active">

   <div class = "progress-bar progress-bar-success" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">

      <span class = "sr-only">40% Complete</span>

   </div>

</div>

Voir le résultat en ligne 

Barre de progression empilée

Vous pouvez même empiler plusieurs barres de progression. Placez les barres de progression multiples dans le même .progress pour les empiler comme vu dans l'exemple suivant-

<div class = "progress">

   <div class = "progress-bar progress-bar-success" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">

      <span class = "sr-only">40% Complete</span>

   </div>

   <div class = "progress-bar progress-bar-info" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">

      <span class = "sr-only">30% Complete (info)</span>

   </div>

   <div class = "progress-bar progress-bar-warning" role = "progressbar" 

      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">

      <span class = "sr-only">20%Complete (warning)</span>

   </div>

</div

<<<Précédent                                      Début                                    suivant>>>