ThemeRoller CSS Framework Demo

Change Theme: Smoothness | South Street | Mint Chocolate | Black Tie

Progress Indicator Demo

Starting Markup

<div />

Transformed Markup

<div class="ui-progressbar ui-component-content ui-corner-all" style="width: 300px;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33"> 
	<div class="ui-progressbar-valuenow-clone">33% Completed</div>
	<div class="ui-progressbar-valuenow ui-state-default ui-corner-left" style="width: 13%;">13% Completed</div> 
</div>

Widget CSS

.ui-progressbar { position: relative; }
.ui-progressbar-valuenow-clone { position: absolute; top: 0; left: 0; padding: .4em .5em; border: 0; background: none; }
.ui-progressbar-valuenow { position: relative; margin: -1px; padding: .4em .5em; overflow: hidden; font-weight: normal !important; white-space: nowrap; }