How to display data label inside HTML5 progress bar? (cross-browser)
All you need to do is set the status text to have a z-index
of 1
(-1 is invalid, 0 is the default) on the status text element and then set a negative margin-top: -32px
(for a height: 32px
) and you can keep the progress
element without adding any excess:
<div style="z-index: 2;"><span>Staging item 144 of 271...</span></div>
<div style="margin-top: -32px;"><progress max="100" value="44">44%</progress></div>
TL;DR: Don't use pseudo elements on a <progress>
element.
As said in other answers, and by me in the comments, a HTML/CSS progress bar would be a better solution than using the <progress>
element.
Gecko-based browsers, like firefox, won't display the pseudo element at all.
However, to answer your question, just position the text over the progress bar:
progress {
text-align: center;
height: 1.5em;
width: 100%;
-webkit-appearance: none;
border: none;
/* Set the progressbar to relative */
position:relative;
}
progress:before {
content: attr(data-label);
font-size: 0.8em;
vertical-align: 0;
/*Position text over the progress bar */
position:absolute;
left:0;
right:0;
}
progress::-webkit-progress-bar {
background-color: #c9c9c9;
}
progress::-webkit-progress-value {
background-color: #7cc4ff;
}
progress::-moz-progress-bar {
background-color: #7cc4ff;
}
<progress max="100" value="50" data-label="50% Complete"></progress>
Note that this does not have good browser support(In fact, it's pretty horrible), because <progress>
is a replaced element, like <input>
.
The CSS specs are not completely clear on if replaced elements can have pseudo elements, so different browsers have different renderings. Webkit-based browsers, such as Chrome, will sometimes display them. Gecko-based, such as Firefox, will not.
See this answer on a somewhat similar question.
So, if this is for a website, and not a electron
app or similar, I highly recommend using a HTML/CSS Progress bar:
.progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
position: relative;
}
.progress:before {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 5px;
left: 0;
right: 0;
}
.progress .value {
background-color: #7cc4ff;
display: inline-block;
height: 100%;
}
<div class="progress" data-label="50% Complete">
<span class="value" style="width:50%;"></span>
</div>
Note: Even if this is for an application with a webkit-based browser, you still shouldn't use psuedo elements on a <progress>
. As I said above, the specs for this functionality are unclear, which could change in the future, breaking your progress element. Webkit could also drop support for this.
I would recommend just using a HTML/CSS progress bar, you'll save yourself a lot of trouble in the future.