Une barre de progression en CSS (progress bar)

Inhoudsopgave

Informatie

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_040405
  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);

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 04/01/2014 gemaakt, de laatste keer de 03/02/2021 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/css-progress-bar.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.