This is a dead simple progress bar without any background pictures and such. We have one containing div (bonus_entry_progress) which contains the bar itself (bonus_entry_bar) and the text (bonus_progress_text) written inside the bar.

The main thing here is to manage to have the text be on top of the green bar, this we do by way of a relative positioning with a top value of -14px to get it to “come up” instead of being rendered beneath the bar.

The containing div has a border that will be filled up by the green bar if we have 100%. The progress is executed by way of a style attribute, below you can see how that is done with PHP.