Clash Royale CLAN TAG

Overlaying content on a progressbar

ul {
margin: 0;
padding: 0;
}
.progress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
li {
position: relative;
margin: 0;
padding: 0;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

<div>some header content</div>
<ul>
<li>
<div class="overlay">
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</div>
<progress class="progress"></progess>
</li>
<li>
<div class="overlay">
<span>some stuff</span>
<input/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
</div>
<progress class="progress"></progess>
</li>
</ul>
<div>some footer content</div>

So what I'm trying to do is have the background of a list element show the progress of that list item processing. What you could do is use a 1x1 pixel image of your chosen color and set it as the background image. Then on progress updates, set the background-width equal to that progress value.

HTML5 now has a progressbar element so I was wondering how hard it would be to implement the same style using that. So far this is the best I've got and it's extremely finicky. Is there actually an easy way to do something like this that I'm overlooking? If not it seems like in this scenario I'm better off doing it the old fashioned way described above.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.