CSS3 progressbar

by Omar X

HTML

<div class="meter"> <span style="width: 50%"></span>

</div>
<br/>
<a href="#" class="click more ui-btn ui-btn-inline">More</a>

<a href="#" class="click less ui-btn ui-btn-b ui-btn-inline">Less</a>

CSS

.meter {
    height: 8px;
    width:100%;
    position: absolute;
    top:0;
    margin: 0;
    background: #ebebeb;
    z-index:9000;
}
.meter > span {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #076e8c;
    -webkit-transition: width 750ms ease-out;
    -moz-transition: width 750ms ease-out;
    -o-transition: width 750ms ease-out;
    transition: width 750ms ease-out;
}

JavaScript

$(function () {
    $(".meter > span").each(function () {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
            width: $(this).data("origWidth")
        }, 1200);
    });

    $('.click').click(function (e) {
        if ($(this).hasClass("more")) {
            $('.meter > span').css('width', function (i) {
                return $(this).width() + $(this).parent().width() * .1;
            });
        } else {
            $('.meter > span').css('width', function (i) {
                return $(this).width() - $(this).parent().width() * .1;
            });
        }
    });
});