Une barre de progression en CSS (progress bar)

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-20210501_164405
  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.