I have a folder tree structure and I would like to include a progress bar alongside each folder name, which is also a clickable link. The progress bar will be created using jQuery UI.
The pblabel element should appear on top of the progress bar. The bar element represents the actual progress with varying width.
<ul>
<li>
<a href="" style="display: inline;">test</a>
<div id="progressbar" style="display: inline; height: 2em; background: white;">
<div id="pblabel" style="position: absolute">progress</div>
<div id="bar" style="display: inline; background: blue; width: 30%; height: 100%;></div>
</div>
</li>
</ul>
While the anchor element and pblabel display correctly, the blue bar and white background of the progress bar are not visible as intended.