Progress bar

by adamh

HTML

<div id="wrapper">
    <div id="outer">
        <span id="back-text">50%</span>
    </div>
    <div id="inner">
        <span id="fore-text">50%</span>
    </div>
</div>

CSS

body {
    font-family: 'Helvetica Neue', Arial;
    background: #333;
    text-align: center;
    padding-top: 40px;
}

#wrapper {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 200px;
    font-size: 12px;
    font-weight: bold;
}

#outer, #inner {
    background: #eee;
    padding: 4px;
    border-radius: 4px;
}

#outer span {
    padding-left: 90px;
}

#inner {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #37c;
    color: white;
    width: 95px;
}

#inner span {
    padding-left: 90px;
}

JavaScript

function progress(el, val) {
    $(el).find('span').html(val + '%');
    $(el).find('#inner').css('width', (val * 2) + 'px');
}

progress('#wrapper', 48);