Une barre de progression en CSS (progress bar)

Contents

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-20241222_020605
  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);

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 04/01/2014, last modified the 03/02/2021
Source of the printed document:https://www.gaudry.be/en/css-progress-bar.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.