CSS Progress Bar or Gauge

Today I needed a gauge to show where on a scale that a value fell.

Example:
progressbar

I wanted to use CSS instead of dynamically creating an image in PHP or creating 100 static images.

I found some samples that use DIV tags to create a gauge, but I needed to put text both before and after the gauge on the same line.
So I modified the sample Super simple CSS bars.

CSS

.progresslineleft {
clear: left;
float: left;
padding-top: 4px;
}

.progresslineright {
float: left;
padding-top: 4px;
}

.progressbar {
border: 1px solid #ccc;
width: 100px;
margin: 2px;
padding: 1px;
background: white;
float: left;
}

.progressbar div {
background-color: #ACE97C;
text-align: right;
}

HTML

<div class="progresslineleft">Uniqueness Score: Similiar (0)&nbsp;</div>
<div class="progressbar"><div style="width:44%">44</div></div>
<div class="progresslineright">&nbsp;Unique (100)</div>

Change the 44’s to the value that should be displayed in the gauge.

Discussion

SPAN tags won’t work because they can’t have a width attribute. Plain DIV tags won’t work because each DIV starts on a new line.

The solution is to float the DIVs.

This has been tested with Firefox 3, Safari 5 and IE 8.

Leave a Reply

Your email address will not be published. Required fields are marked *