Barras de progresso vazias, meio cheias e cheias

<style type="text/css">
div.bar {
    border: 1px solid #a9ada9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
    background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: linear-gradient(top, #ffffff, #f2f2f2);
    background-repeat: repeat-x;
    background-color: #f2f2f2;
    width: 162px;
    line-height: 70%;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    display: inline-block;
    font-size: 15px;
    width: 75px;
    cursor: help;
}

div.bar, div.bar > div {
    height: 10px;   
}

div.bar > div.empty {
    width: 0%;
}

div.bar > div.half {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffcc11');
    background-image: -ms-linear-gradient(top, #f2f2f2, #ffcc11);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffcc11));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #ffcc11);
    background-image: -o-linear-gradient(top, #f2f2f2, #ffcc11);
    background-image: -moz-linear-gradient(top, #f2f2f2, #ffcc11);
    background-image: linear-gradient(top, #f2f2f2, #ffcc11);
    background-repeat: repeat-x;
    background-color: #ffcc11;
    width: 50%;
    border-right: 1px solid #a9ada9;
}

div.bar > div.full {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#00cc00');
    background-image: -ms-linear-gradient(top, #f2f2f2, #00cc00);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#00cc00));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #00cc00);
    background-image: -o-linear-gradient(top, #f2f2f2, #00cc00);
    background-image: -moz-linear-gradient(top, #f2f2f2, #00cc00);
    background-image: linear-gradient(top, #f2f2f2, #00cc00);
    background-repeat: repeat-x;
    background-color: #00cc00;
    width: 100%;    
}
</style>

<p><div class="bar" title="Not Completed"><div class="empty"></div></div></p>
<p><div class="bar" title="Half Completed"><div class="half"></div></div></p>
<p><div class="bar" title="Completed"><div class="full"></div></div></p>