jquery進度條從底部向上填充

Question

我有以下一段代碼，這是一個jquery progerss欄。

<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>