Une barre de progression en CSS (progress bar)

Table des matières

Information

Depuis HTML5, il est plus facile d'utiliser le composant <progress>

Une barre de progression inversée


 

Le code HTML

  1. <!--début du code
  2. .../
  3. -->
  4. <div id="slideshowProgress" class="lqd">
  5. 	<div id="slideshowProgressBar" class="lqd"></div>
  6. </div>
  7. <span id="progressDelay"></span>
  8. <!--
  9. /...
  10. fin du code
  11. -->

Le code CSS

  1. /*!
  2.  * Theme Name: 			2018
  3.  * Version: 			20181124-20240727_073736
  4.  * Description: 		style for the progress bars
  5.  * 
  6.  * 
  7.  */#slideshowProgress {
  8.   width: 100px;
  9.   height: 25px;
  10.   background-color: #1e1e20;
  11.   background-color: var(--body-bg-color);
  12. }
  13. #slideshowProgress.lqd {
  14.   width: 200px;
  15.   height: auto;
  16.   bottom: 10px;
  17.   padding: 4px;
  18.   -webkit-border-radius: 6px;
  19.   -moz-border-radius: 6px;
  20.   border-radius: 6px;
  21.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 1px rgba(255,255,255,0.08);
  22.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 1px rgba(255,255,255,0.08);
  23.   vertical-align: middle;
  24. }
  25. #slideshowProgressBar:not(.lqd) {
  26.   width: 0%;
  27.   height: 25px;
  28.   background-color: #c0c0c0;
  29.   background-color: var(--body-color);
  30.   text-align: right;
  31.   line-height: 25px;
  32.   color: #ffffff;
  33.   -webkit-border-radius: 2px;
  34.   -moz-border-radius: 2px;
  35.   border-radius: 2px;
  36. }
  37. #slideshowProgressBar.lqd {
  38.   width: 100%;
  39.   height: 16px;
  40.   line-height: 16px;
  41.   -webkit-border-radius: 4px;
  42.   -moz-border-radius: 4px;
  43.   border-radius: 4px;
  44.   background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
  45.   background-image: -moz-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
  46.   background-image: -o-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
  47.   background-image: linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
  48.   -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.25), inset 0 1px rgba(255,255,255,0.1);
  49.   box-shadow: 0 0 1px 1px rgba(0,0,0,0.25), inset 0 1px rgba(255,255,255,0.1);
  50.   -webkit-transition: 0.1s linear;
  51.   -moz-transition: 0.1s linear;
  52.   -o-transition: 0.1s linear;
  53.   transition: 0.1s linear;
  54.   -webkit-transition-property: width;
  55.   -moz-transition-property: width;
  56.   -o-transition-property: width;
  57.   transition-property: width;
  58. }
  59. #slideshowProgressBar.p5 {
  60.   background-color: #f63a0f;
  61.   color: #fff;
  62. }
  63. #slideshowProgressBar.p25 {
  64.   background-color: #f27011;
  65.   color: #300;
  66. }
  67. #slideshowProgressBar.p50 {
  68.   background-color: #f2b01e;
  69.   color: #000;
  70. }
  71. #slideshowProgressBar.p75 {
  72.   background-color: #f2d31b;
  73.   color: #000;
  74. }
  75. #slideshowProgressBar.p100 {
  76.   background-color: #86e01e;
  77.   color: #000;
  78. }

Animer une barre de progression


 

Cette méthode est facile à utiliser, mais ne permet pas par exemple d'interrompre la progression, comme on pourrait le faire avec un timer.

  1. $(function () {
  2.  
  3.     var progressPercent = 0;
  4.     var pgDuration = 5000;
  5.     var pgWidth = $("#slideshowProgress2").width();
  6.     $("#slideshowProgressBar2").animate({
  7.         width: pgWidth
  8.     }, {
  9.         easing:"linear",
  10.         duration: pgDuration,
  11.         //the argument in the step call back function will hold the
  12.         // current position of the animated property - width in this case.
  13.         step: function(currentWidth,fx) {
  14.             progressPercent = Math.round((100/pgWidth)*currentWidth);
  15.             $("#progressDelay2").text(progressPercent+"%");
  16.         },
  17.         complete: function() {
  18.             $('#animatePB').prop("checked", false);
  19.             $('#animatePB').removeAttr("disabled");
  20.         }
  21.     });
  22.  
  23. });

Le composant <progress>

  1. <progress id="pg1" max="100" value="50"> 50% </progress>
?
50%
 

Affecter des valeurs à la barre de progression

           

Affecter une valeur à une barre de progression devient donc très facile:

  1. $('#id_de_ma_barre').val(20);

Document créé le 04/01/2014, dernière modification le 03/02/2021
Source du document imprimé : https://www.gaudry.be/css-progress-bar.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.