Poll results test

by t2t2

HTML

<div id="bar-0" class="barcontain"><div class="bar"></div></div><div id="count-0" class="count"></div>
<div id="bar-1" class="barcontain"><div class="bar"></div></div><div id="count-1" class="count"></div>
<div id="bar-2" class="barcontain"><div class="bar"></div></div><div id="count-2" class="count"></div>
<div id="bar-3" class="barcontain"><div class="bar"></div></div><div id="count-3" class="count"></div>
<div id="bar-4" class="barcontain"><div class="bar"></div></div><div id="count-4" class="count"></div>
<div id="bar-5" class="barcontain"><div class="bar"></div></div><div id="count-5" class="count"></div>
<div id="bar-6" class="barcontain"><div class="bar"></div></div><div id="count-6" class="count"></div>
<div id="bar-7" class="barcontain"><div class="bar"></div></div><div id="count-7" class="count"></div>
<div id="bar-8" class="barcontain"><div class="bar"></div></div><div id="count-8" class="count"></div>
<div id="bar-9" class="barcontain"><div class="bar"></div></div><div id="count-9" class="count"></div>
<div id="bar-10" class="barcontain"><div class="bar"></div></div><div id="count-10" class="count"></div>

CSS

.barcontain {
    border: 1px solid #000;
    width: 90%;
    height: 10px;
    margin-bottom: 1px;
    float: left;
}
.count {
    width: 8%;
    height: 10px;
    padding: 1px;
    font-size: 10px;
    float: right;
    text-align: center;
    background: #EEE;
}
.bar {
    background: #00F;
    height: 10px;
    width: 0%;
}

JavaScript

var resultData = {
    0: 0,
    1: 10,
    2: 20,
    3: 30,
    4: 40,
    5: 50,
    6: 60,
    7: 70,
    8: 80,
    9: 90,
    10: 100
};
$.each(resultData, function(i, val) {
    $('#bar-'+i+' .bar').animate({width: val+'%'}, val*100, 'linear', function() {
        $('#count-'+i).text(val+'%');
    });
});