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 class="bonus_progress_text">
		<?php echo t('progress') ?>: <?php echo $progress ?>%

And the CSS:

	border: solid 1px;
	width: 300px;
	height: 14px;

	background-color: #0a0;

	position: relative;

Related Posts

Tags: ,