How to put texts in progress

Question

How to put texts in progress

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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

        <progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100"> 
        </progress>

html css progress-bar

asked by anonymous 22.02.2017 / 00:12

2 answers

Insert MySQL data with .txt file How to join records from a table distributed in multiple .sqlite files?

score 2 · Answer 1

With only css / html I do not know how it would be, but here is 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>

score 1 · Answer 2

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

You can do this:

progress::after {
	content: attr(data-content);
}

<progress name="progressbar" id="progressbar" class="progressbar" value="35" max="100" data-content="35% do progresso"></progress>