I am currently working on a progress bar that utilizes text-indent to display text in the middle of the progress.
Everything seems to be functioning correctly in Chrome and IE, but for some reason it's not working in Firefox. (surprising, right?)
Take a look at the discrepancy between Chrome and Firefox:
For an animated version, visit:
HTML
<div class="container">
<div class="bars bar1">sametext</div>
<div class="bars bar2">sametext</div>
</div>
CSS
.container{
border:1px solid #09c;
height: 20px;
width: 100%;
position: relative;
}
.container .bars{
text-indent: 45%;
position: absolute;
top:0;
font-family: arial;
color: #09c;
}
.container .bar2{
background-color: #09c;
width: 50%;
color: #fff;
overflow: hidden;
}
The width in bar2 and text-indent are both dynamic variables designed to showcase the expected result as the progress bar fills up.