Question

I get a decimal number between 1 to 5 which I want to represent like the above mentioned image. This image for example shows a value 3.7

What will be the best possible way to display it using html + css

Answer 1

Assuming that you can turn the decimal into a percentage, this is doable with pure CSS. Or, you can use a small snippet of JavaScript to set/adjust the percentage value.

IE7+, Chrome, etc.

Example 1

Simple example, no script, minimal markup: http://jsfiddle.net/GqK6p/6/

HTML

<div id="progress"></div>
<ul id="mask">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

#wrapper { position: relative; height: 30px; width: 180px; }
#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; width: 74%; height: 100%; }
#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }

Example 2

A bit more polished example, allowing for inner styling of each box: http://jsfiddle.net/GqK6p/2/

This also shows the usage of percentage-based width for the bar.

HTML

<div id="wrapper">
    <div id="progress"></div>
    <ul id="mask">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>  
</div>

CSS

#wrapper { position: relative; height: 30px; width: 180px; }

/* set width to whatever percentage makes sense based on decimal value */

#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; 
    width: 59%; height: 100%; }

#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }
LI > DIV { border: 1px solid #555; height: 20px; }

Example 3

Here’s an animated variation which shows how to dynamically adjust the width of the progress bar with JavaScript: http://jsfiddle.net/GqK6p/4/

var progress = $("#progress");
var width = 0; // use whatever starting value makes sense

setInterval(function(){

    // increment/process as desired
    if( ++width > 100 ){
         width = 0;
    }        

    progress.css("width",  width + "%");       
}, 25);​

HTML 5 Progress Element

As a side note, the HTML 5 progress element would probably be the semantic choice for this type of information, but browser support isn’t complete yet, and I don’t think any capability exists to style progress.