\n
![\"progressbar\"](\"http:\/\/brucemyers.com\/wp-content\/uploads\/2010\/12\/progressbar.png\")
<\/a><\/p>\nI wanted to use CSS instead of dynamically creating an image in PHP or creating 100 static images.<\/p>\n
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. .progressbar { <\/code> Change the 44's to the value that should be displayed in the gauge.<\/p>\n 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.<\/p>\n The solution is to float the DIVs.<\/p>\n This has been tested with Firefox 3, Safari 5 and IE 8.<\/p>\n","protected":false},"excerpt":{"rendered":" Today I needed a gauge to show where on a scale that a value fell. Example: 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 … Continue reading CSS Progress Bar or Gauge<\/span>
\nSo I modified the sample Super simple CSS bars<\/a>.
\n<\/p>\nCSS<\/h3>\n
.progresslineleft {
\nclear: left;
\nfloat: left;
\npadding-top: 4px;
\n}<\/code><\/p>\n.progresslineright {
\nfloat: left;
\npadding-top: 4px;
\n}<\/p>\n
\nborder: 1px solid #ccc;
\nwidth: 100px;
\nmargin: 2px;
\npadding: 1px;
\nbackground: white;
\nfloat: left;
\n}<\/p>\n.progressbar div {
\nbackground-color: #ACE97C;
\ntext-align: right;
\n}<\/code><\/p>\nHTML<\/h3>\n
<div class=\"progresslineleft\">Uniqueness Score: Similiar (0) <\/div>
\n<div class=\"progressbar\"><div style=\"width:44%\">44<\/div><\/div>
\n<div class=\"progresslineright\"> Unique (100)<\/div><\/code><\/p>\nDiscussion<\/h3>\n