Powered by Blogger.

Monday, October 27, 2008

Tag: , ,

Create a percent bar with CSS

To create a easy and valid percent bar or tipicall star bar we can use a schemma as you can see below.

CSS-Percent schema

With this html code:
<span class="percent"><span style="width:25%">25%</span></span>

And this stylesheet:
display: block;
float: left;
background:url(images/percent.png) top left no-repeat;
height: 17px;
.percent span{
background:url(images/percent.png) bottom right no-repeat;

This is the result of our percent image:

About David Millán Escrivá

David completed his studies in Universidad Politecnica de Valencia in IT with a Master's degree in artificial intelligence, computer graphics, and pattern recognition, focusing on pattern recognition and Computer Vision. David has more than 15 years of experience in IT, with more than ten years of experience in Computer Vision, computer graphics, and pattern recognition, working on different projects and start-ups, applying his knowledge of Computer Vision, optical character recognition, and augmented reality. Co-Author of two OpenCV books and reviewer of few more.


  1. Forgot to mention the file 'images/bg_boxed_th.gif' only needs to be 1 pixel wide and enough pixels high to cover the height of the bar.

  2. grrr didn't noticed the HTML got edited out!

    [div id="pc" style="width:400px"][span style="width:15%"]15%[/span][/div]

  3. very nice - both versions!!