CODEWITHSUNDEEP
htmltextprogress-bar
user16620643
user16620643

Reputation:

How do you put text inside of a progress bar?

I would like to put text in the middle of the following progress bar:

<progress align="left" class="turnbox2 turnbar" id="myturn"></progress>

I would like the text to display the value of the progress bar.

Upvotes: 2

Views: 5972

Answers (1)

Shahryar Mohajer
Shahryar Mohajer

Reputation: 589

you can use before in css

#myturn{
  height:30px;
  width:300px;
  background-color:orange;
  position:relative;
}

#myturn::before{
  position:absolute;
  height:30px;
  background:green;
  content:'Custom text or 70%';//add your text
  top:0;
  left:0;
  width:70%;
  display:flex;
  color:white;
  align-items:center;
  justify-content:flex-end;
  padding-right:10px;
}
<progress align="left" class="turnbox2 turnbar" id="myturn"></progress>

Update:

this is work without css:

progress {
    -webkit-appearance: none;
}

progress::-webkit-progress-bar {
    background-color: #666;
}

#myturn span {
    position: absolute;
    display: inline-block;
    color: #fff;
    text-align: right;
}

#myturn {
    display: block;
    position: relative;
    width: 100%;
}

progress {
    width: 100%;
}
<div id="myturn">
    <span data-value="60" style="width: 60%;">custom text or 60%</span>
    <progress value="60" max="100"></progress>
</div>

Upvotes: 1

Related Questions