Barre de progression en css

Balises progress et meter

• balise progress

  <progress max="100" value="70"></progress>
  

  qui donne:
  (voir les détails sur l'élément progress)
  
  
• balise meter

  <meter min="0" max="100" low="33" high="66" optimum="80" value="70"></meter>

  qui donne:
  (voir les détails l'élément meter)

Construction en css pur

Barre de progression simple

<style>
.bpout{
  display:inline-block;
  height:1.5em;width:20em;max-width:90%;
  background:linear-gradient(blue 10%,rgba(200,200,255,1) 25%,blue 45%);
  border:1.5px solid black;border-radius:10px;
  box-shadow: 2px 5px 5px rgba(100,100,100,1);
}
.bpin{
  display:inline-block;
  background:linear-gradient(to bottom,red 10%,white 25%,red 42%);
  height:100%;border-radius:10px;width:70%
}
</style>

<div class="bpout"><div class="bpin"></div></div>

Barre de progression biseutée

<style>
.thp{
  width:20em;height:25px;border:1px solid #444444;
  border:1.5px solid black;border-radius:10px;max-width:90%;
  box-shadow: 2px 5px 5px rgba(100,100,100,1);
  background: 
    linear-gradient(to bottom,rgba(0,0,255,0) 15%,rgba(255,255,255,.7) 25%,rgba(0,0,255,0) 35%),
    linear-gradient(135deg,red 70%,rgba(50,50,50,1) 71%,blue 72%,blue 100%);
}
</style>

<div class="thp"></div>

Animation via javascript

<button onclick="move()">Start</button> - <button onclick="reset()">Reset</button>

<br>
<progress id="animprogress" max="100" value="30"></progress>
<br>
<meter id="animmeter" min="0" max="100" low="33" high="66" optimum="80" value="70"></meter>
<br>
<div class="bpout"><div id="animbpin" class="bpin"></div></div>
<br>
<div id="animthp" class="thp"></div>


<script>
document.getElementById("animprogress").style.width='20em';
document.getElementById("animmeter").style.width='20em';

function setBarre(width) {
  document.getElementById("animprogress").value=width;
  document.getElementById("animmeter").value=width;
  document.getElementById("animbpin").style.width=width+'%';
  document.getElementById("animthp").style.background='linear-gradient(to bottom,rgba(0,0,255,0) 15%,rgba(255,255,255,.7) 25%,rgba(0,0,255,0) 35%),linear-gradient(135deg,red '+width+'%,rgba(50,50,50,1) '+(width+1)+'%,blue '+(width+2)+'%,blue 100%)';
}
function move() {
  var width = 0;
  var id = setInterval(frame, 15);
  function frame() {
    if (width == 100) {clearInterval(id);} 
    else {width++;setBarre(width);}
  }
}
function reset() {setBarre(0);}
</script>