20th Apr 2008

CSS Based Percentage Bar

For one of my projects I had to create a visual representation of two percentages being compared side by side. I decided to do this using divs and CSS. With this design, all I have to do is set a value in my PHP for the width of the div highlighted in bold below and the sizing takes care of itself.

Here is what I came up with:

HTML:

<div class=”scoreBars”>
<div class=”scoreDivider”></div>

<div style=”width: 42%; height: 22px;background-color: #99CC00; position:absolute; top:0px; left:0px”></div>

<div style=” width:100%;height: 22px; position: absolute; z-index: 2; top: 0px; left: 0px;”>
<div style=”float: left; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 42% </div>
<div style=”float: right; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 58% </div>
</div>
</div>

CSS:

.scoreBars{
position:relative;

width:100%;
border:1px solid #999999;
height:22px;

/*This sets the color representing the right had side of the bars. The left hand value set in the HTML about simply covers this background color, so all I have to do is set the width for the div covering this color.*/
background-color:#3366CC;
}

/*The divider is simply a div with a right border that divides over all length of the bars into halves giving us an indication where 50% is.*/
.scoreDivider{
position:absolute;
width:50%;
border:dashed #FFFFFF;
border-width:0px 1px 0px 0px;
height:22px;
top:0px;
left:0px;
}

Result:

CSS Percent Bars

2 Responses to “CSS Based Percentage Bar”

  1. dashed border in as3 flex Says:

    […] PHP web development. … border:dashed FFFFFF border-width:0px 1px 0px 0px height:22px top:0px …http://visualflowdesigns.com/blog/2008/04/20/css-based-percentage-bar/Quietly Scheming ? Blog Archive ? Using the Graphics API for …Is there a way to get the reflection […]

  2. Techie Talks Says:

    The progress bar looks great!