Заполнить строку прогресса jquery снизу вверх

Question

Заполнить строку прогресса jquery снизу вверх

0

У меня есть следующий фрагмент кода, который представляет собой панель 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>

Этот индикатор выполнения заполняется горизонтально. Как я могу заставить его заполнять вертикально снизу вверх?

user2491321 29 март 2014, в 19:49

Источник

0

Использовать filler.style.height вместо ширины ...?
Dom 29 март 2014, в 18:24
0

jsfiddle.net/mjEDY/1
user2491321 29 март 2014, в 18:26

Теги:

jquery

css

1 ответ

Ещё вопросы

Использовать filler.style.height вместо ширины ...?

Aamir Afridi · Accepted Answer · 2014-03-29T16-49-00.000Z

Как это 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>