meter

HTML

<div class="meter empty">0%</div>
<div class="meter quarter">25%</div>
<div class="meter half">50%</div>
<div class="meter threequarter">99%</div>
<div class="meter full">100%</div>

CSS

.meter, .meter:after {
    background-repeat: repeat-x;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAMAAACK2/weAAAAAXNSR0IArs4c6QAAAJ9QTFRF////9PT0/Pz8+vr6AGyo8fHx39/f5+fnyMjIqamp2tra+/v8AGunAGuoAENkAIq6AE96AIq5AFeHAGObAGScAFaHAGynAFeIAGOcAENjAGqnAFB6AERlAFB7AE95AIu5AE97AEJjAFiIAIu6AGKbAENl+vv82dnZ8/Pz/v7/AFF7+/z8AFaGAGKaAERkAIm5AGKc/Pr8AEJkAFeG+fn5qSP1QwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90FFw4ZMacawS8AAACJSURBVBjTZcnrCsIwDAXgY6jXNl3b1datG4r+Gvr+z2dEhAy/kHCSgKy1T/sDio8uxmsnI3YRxKNjZsPGSX1WNsUUOUkCOScPZsdj4QLqc+7zd1x6UE013aXr+ZUSaA6hhRBuc2stgCbvh2nyw+AlgVaAZVmgHDXgoAEnDdhrwFYDNtrfutOw9gZZLQsgFoeu3QAAAABJRU5ErkJggg==);
}
.meter {
    margin: 10px;/* bs, just for display here */
    position: relative;
    width: 99px;
    height: 10px;
    background-position: 0 -10px;
    text-indent: -999em;
}
.meter:after {
    position: absolute;
    top: 0;
    content:'';
    display: block;
    height: 10px;
}
.meter.half:after {
    width: 50%;
}
.meter.full:after {
    width: 100%;
}
.meter.quarter:after {
    width: 25%;
}
.meter.threequarter:after {
    width: 75%;
}