How to design progress bar with text of its value?

Question

How can I create something like this progress bar?

Answer 1

Simply nest a div in another div and set the width of the nested div to the progress percentage. You can align the text with text-align:center.

.progress-bar{
  background-color:#EAECEF;
}
.progress-bar .bar{
  background-color:#314EFF;
  color:white;
  text-align:center;
}

<div class="progress-bar">
  <div class="bar" style="width:49%">
    49%
  </div>
</div>