Bar widget

by evan

HTML

<div class="row">
    <div class="label">Mountain bikes</div>
    <div class="bar-container">
        <div class="bar" style="width: 100%;">
            <div class="value">$8,345</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="label">Road bikes</div>
    <div class="bar-container">
        <div class="bar" style="width: 85%;">
            <div class="value">$4,309</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="label">Apparel</div>
    <div class="bar-container">
        <div class="bar" style="width: 65%;">
            <div class="value">$2,220</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="label">4 others</div>
    <div class="bar-container">
        <div class="bar" style="width: 55%;">
            <div class="value">$1,495</div>
        </div>
    </div>
</div>
<div class="row-total">
    <span class="label">Total:</span>
    <span class="value">$20,345</span>
</div>

CSS

.row {
    margin-bottom: 8px;
}
.row .label {
    margin-bottom: 3px;
    letter-spacing: 0.5pt;
}
.row .label, .row-total .label {
    font-size: 8pt;
    font-family: Arial;
    color: #7A7B7C;
}
.row .bar-container {
    width: 128px;
}
.row .bar {
    height: 5px;
    background-color: blue;
    position: relative;
}
.row .value {
    position: absolute;
    width: 60px;
    line-height: 12px;
    top: -4px;
    right: -64px;
}
.row .value, .row-total .value {
    font-size: 8pt;
    font-family: Arial;
    color: #A6B1B5;
}
.row-total {
    padding-top: 6px;
}
.row-total .value {
    color: #2C2E2F;
    font-weight: bold;
}