Dead simple CSS progress bar
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.
<div class="bonus_entry_progress">
<div class="bonus_entry_bar" style="width:<?php echo $progress ?>%">
</div>
<div class="bonus_progress_text">
<?php echo t('progress') ?>: <?php echo $progress ?>%
</div>
</div>And the CSS:
.bonus_entry_progress{
border: solid 1px;
width: 300px;
height: 14px;
}
.bonus_entry_bar{
background-color: #0a0;
}
.bonus_progress_text{
position: relative;
top:-14px;
left:0:
}