jquery进度条从下到上填充

Question

我有以下代码，这是一个jquery进度条。

<style>
.prog {
width:200px;
height:50px;
border:1px solid black;
}
.filler {
width:0%;
height:50px;
background-color:black;
}
</style>


<div class="prog">
    <div id="filler" class="filler"></div>
</div>


<script>

var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
    percentage = 0;
return function progress() {
    filler.style.width = percentage + "%";
    percentage +=1;
    if (percentage <= 100) {
        setTimeout(progress, stepSize);
    }
}

}()), stepSize);

</script>

此进度条横向填充。如何让它从下到上填充垂直？

Answer 1

喜欢这个http://jsbin.com/getazoju/1/

<style>
    .prog {
        height: 200px;
        width: 50px;
        border: 1px solid black;
        position: relative;
    }
    .filler {
        height: 0%;
        width: 50px;
        position: absolute;
        bottom: 0;
        background-color: black;
    }
</style>


<div class="prog">
    <div id="filler" class="filler"></div>
</div>


<script>
    var stepSize = 50;
    setTimeout((function () {
        var filler = document.getElementById("filler"),
            percentage = 0;
        return function progress() {
            filler.style.height = percentage + "%";
            percentage += 1;
            if (percentage <= 100) {
                setTimeout(progress, stepSize);
            }
        }

    }()), stepSize);
</script>