Barres de progression Bootstrap - Preogress bar Bootstrap

Barres de progression Bootsrap

Dans ce tutoriel, je vous propose de découvrir les barres de progression de Bootstrap, trés utiles pour afficher des états d'avancement.

Les barres de progression utilisent des transitions et des animations en CSS3. Ces fonctionnalités ne sont pas prises en charge dans les anciens navigateurs comme Internet Explorer 9 et versions antérieures. Concernant les navigateurs Apple, Opera 12 ne supporte pas les animations.

Exemple basique


<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

    <span class="sr-only">60% effectué</span>

  </div>

</div>

Exemple

Avec une étiquette

Supprimer la balise <span> avec classe .sr-only pour afficher le pourcentage de barre de progression.


<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

  60%

  </div>

</div>

Exemple

60%

Si les pourcentages sont trés faibles, il faudra ajouter un min-width dans la balise style pour pouvoir afficher l'étiquette de valeur.


<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">

  0%

  </div>

</div>



<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;; width: 2%;">

  2%

  </div>

</div>

Exemple

Avec de la couleur

   
<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% effectué (success)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

    <span class="sr-only">20% effectué </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: 60%">

    <span class="sr-only">60% effectué (warning)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

    <span class="sr-only">80% effectué (danger)</span>

  </div>

</div>

Exemple

Rayé

Réalisé à partir de dégradés. Ne passe pas dans les version d'Interrnet Explorer inférieur à 9.

   
<div class="progress">

  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% effectué (success)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

    <span class="sr-only">20% effectué </span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

    <span class="sr-only">60% effectué (warning)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

    <span class="sr-only">80% effectué (danger)</span>

  </div>

</div>

Exemple

Animé

Il suffit d'ajouter la classe .active à la classe .progress-bar-striped pour animer les barres de droite à gauche.


<div class="progress">

  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% effectué (success)</span>

  </div>

</div>

Exemple

Empilé

Pour empiler les couleurs, il suffit de placer les éléments dans la même classe .progress.


<div class="progress">

  <div class="progress-bar progress-bar-success" style="width: 35%">

    <span class="sr-only">35% effectué (success)</span>

  </div>

  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">

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

  </div>

  <div class="progress-bar progress-bar-danger" style="width: 10%">

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

  <div>

</div>

Exemple

Tutoriel Bootstrap

Barres de progression Bootsrap

Exemple basique

Avec une étiquette

Avec de la couleur

Rayé

Animé

Empilé