Olá, eu tenho uma progress
, porém eu gostaria de adicionar o valor da porcentagem no centro dela, com mais algumas informações.
<progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100">
</progress>
Com só com css/html não sei como seria, mas aqui está uma solução com javascript:
var elem = document.getElementById("progbar");
var width = 1
var timer = setInterval(function() {
if (width >= 100) {
clearInterval(timer);
} else {
width++;
elem.innerHTML = width+ '%'
elem.style.width = width + '%';
}
}, 20);
#progress {
width: 100%;
background-color: #ddd;
}
#progbar {
text-align: center;
color: #000000:
height: 30px;
width: 0px;
background-color: #4CAF50;
}
<div id="progress">
<div id="progbar">0%</div>
</div>
Você pode fazer isso definindo a informação dentro do progress e exibindo com css
utilizando pseudo elementos after
e before
do css
. Esses elementos não existem dentro do DOM
, só existem para adicionar informações referentes ao estilo da página.
Pode fazer dessa forma:
progress::after {
content: attr(data-content);
}
<progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100" data-content="35% do progresso"></progress>