Search code examples
htmlrating

HTML: Colored Rating Bar

I am trying to achieve color rating bar similar to the one in GsmArena website. I tried using divs as shown below.

<div style="background-color: yellow;width: 150px;">
        <div style="background-color: red;width: 40%; height: 15px;">
        </div>
</div>

Is there any other better way to design a rating bar? Any help is appreciated. Thanks in advance.

Edit:

Rating bar in Gsmarena How to place the inside div exactly in the center of the outer div as shown in the picture (Taken from gsmarena)?

Solution

  • I would say what you have is good enough. JQuery UI progress bar does something very similar:

    <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 37%;"></div>
</div>

    enter image description here

    Edit: If you want the 'exact' of what they have at gsmarena then here is css that imitates what they do (following @Pelshoff's advice with splitting out the css):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
        .graph {background-color: #d0c0c1; width: 150px; height:11px; padding:1px}
        .graph>div {width: 100%; height:100%; border-width: 1px 0 0 1px; border-style: solid; border-color: #eedfdc #d0c0c1 #d0c0c1 #eedfdc;}
        .bar {background-color: #e94949; width: 40%; height: 65%; border: 1px solid #475a69;}
        .bar>div {height:80%; border-width: 1px 0 0 1px; border-style: solid; border-color: #ec9493 #e94949 #e94949 #ec9493;}
    </style>
</head>
<body>
    <div class="graph">
        <div>
            <div class="bar"> 
                <div> </div>
            </div>
        </div>
    </div>
</body>
</html>

    The above html produces this:

    enter image description here

    On gsmarena they use images, but this is done in pure css. You need the 4 divs instead of 2 for the 1px highlights.

    This is all done using Gimp to copy the image colours and Firebug for firefox/chrome to sort the css.