Comment je peux faire cette barre de progression?

Question

Example of what I want

Salut, ma question est simple, il suffit de regarder à la photo ci-dessus :)

Comment puis-je faire cela?

Si je mets un arrière-plan sur la partie progression de la barre, quand la progression est sur 10%, l'arrière-plan remplira tous les 10%, mais je ne veux montrer que 10% de l'arrière-plan! Peut-être que la solution consiste à placer une barre de progression grise au-dessus de la barre de progression du dégradé de 100%, mais je dois faire un rayon de bordure inversé ... Je pense que ce n'est pas possible. ?

Answer 1

j'utiliser un backgroun D gradient linéaire pour la barre colorée, et définissez la largeur à la même que la largeur de la barre de progression.

à-direbackground: linear-gradient(to right, yellow, #BD3D3D 100%);

par exemple,

.progressbar { 
 
    background: lightgray; 
 
    width: 300px; 
 
    height:20px; 
 
    border-radius: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.progressbar>.progress{ 
 
    height:20px; 
 
    background: linear-gradient(to right, yellow, #BD3D3D 300px); 
 
    border-radius: 10px; 
 
} 
 

 
/* set some custom progresses */ 
 

 
.progressbar:nth-child(1)>.progress{ 
 
    width: 25%; 
 
} 
 
.progressbar:nth-child(2)>.progress{ 
 
    width: 50%; 
 
} 
 
.progressbar:nth-child(3)>.progress{ 
 
    width: 100%; 
 
}

<div class="progressbar"><div class="progress"></div></div> 
 
<div class="progressbar"><div class="progress"></div></div> 
 
<div class="progressbar"><div class="progress"></div></div>

Answer 2

Html partie

<div id="myProgress"> 
    <div id="myBar">10%</div> 
</div> 
<button onclick='move()'>Click me</button> 

partie Css

#myBar { 
    width: 10%; 
    height: 30px; 
    background-color: #4CAF50; 
    text-align: center; /* To center it horizontally (if you want) */ 
    line-height: 30px; /* To center it vertically */ 
    color: white; 
} 

partie Javascript

function move() { 
    var elem = document.getElementById("myBar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1 + '%'; 
     } 
    } 
}