How to put texts in Progress

Asked

Viewed 564 times

2

Hello, I have a progress, but I would like to add the value of the percentage at the center of it, with some more information.

        <progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100"> 
        </progress>
html css progress-bar

2 answers

2

With only css/html I don’t know how it would be, but here’s a solution with 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>

1

You can do this by setting the information inside the Progress and displaying with css using pseudo elements after and before of css. These elements do not exist within the DOM, only exist to add page style information.

You can do it that way:

progress::after {
	content: attr(data-content);
}
<progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100" data-content="35% do progresso"></progress>

Browser other questions tagged html css progress-bar

You are not signed in. Login or sign up in order to post.