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.

29 thoughts on “CSS Progress Bar or Gauge”

  1. Admiring the commitment you put into your website and detailed information you provide. It’s nice to come across a blog every once in a while that isn’t the same old rehashed material. Great read! I’ve saved your site and I’m including your RSS feeds to my Google account.

  2. It is the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I want to suggest you some interesting things or tips. Maybe you could write next articles referring to this article. I wish to read more things about it!

  3. What i don’t understood is in truth how you’re now not really a lot more well-appreciated than you may be now. You are very intelligent. You know thus considerably when it comes to this matter, produced me in my view consider it from so many numerous angles. Its like men and women don’t seem to be interested except it is one thing to accomplish with Woman gaga! Your own stuffs outstanding. All the time deal with it up!

  4. Good blog! I truly love how it is easy on my eyes and the data are well written. I am wondering how I might be notified when a new post has been made. I have subscribed to your RSS feed which must do the trick! Have a nice day!

  5. Nice weblog right here! Also your website quite a bit up fast! What web host are you the use of? Can I am getting your associate link for your host? I desire my site loaded up as fast as yours lol

  6. I was just looking for this information for a while. After six hours of continuous Googleing, at last I got it in your web site. I wonder what’s the lack of Google strategy that do not rank this kind of informative websites in top of the list. Generally the top web sites are full of garbage.

  7. Hi, Neat post. There is a problem together with your web site in web explorer, could test thisK IE nonetheless is the marketplace chief and a huge portion of other folks will omit your excellent writing due to this problem.

  8. Magnificent items from you, man. I’ve have in mind your stuff previous to and you are simply too fantastic. I actually like what you’ve acquired right here, really like what you’re saying and the way during which you assert it. You’re making it entertaining and you continue to care for to stay it smart. I can not wait to read much more from you. That is really a great site.

Leave a Reply

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