Une barre de progression en CSS (progress bar)

Inhaltsverzeichnis

Informationen

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-20241221_175012
  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);

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 04/01/2014, zuletzt geändert 03/02/2021
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-progress-bar.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.