How to make a Line automatically increase the height of javascript css jquery

Question

Good evening, people I’m with the following problem, in the layout I’m mounting has several lines in different places during the course of the page, the customer wants these lines to appear and grow coming from different directions, initially I made one of these lines using the Html5’s"Progress", but I can only do this when it is to increase the width, when the line is vertical I have problems, I tried to use Transform Rotate but it was not good because even using the Rotate it still occupies the side size on the screen, anyway I wanted other ways to make this line increase, which is malleable so I can increase the width and height without harming the layout, I’m doing so for now, so ta with the Rotate:

<progress id="barra1" class='custom' max='100' value='0' data-value=''></progress>

<script>
var $progress = document.querySelector('#barra1'), // Pegando o elemento
MAXIMUM   = $progress.max;                      // Pegando o valor máximo: 
100

/* Aumentando o valor a cada 1 segundo... */
var interval = setInterval(function(){
$progress.value++;
if($progress.value >= MAXIMUM)
clearInterval(interval);
}, 100);
</script>

.custom {
background-color: #dc853d;
width: 800px;
height: 1px;
transform: rotate(270deg);
}

Answer 1

Works best with Jquery:

<div>
    <hr id="linha" class="borda-p">
</div>

ou dessa forma

<div>
    <hr id="linha2" class="borda-p-ja-vertical">
</div>

<style>
    .borda-p{
        border: #000 thin solid;
        width: 0;
    }
    .borda-p-ja-vertical{
        border: #000 thin solid;
        width: 0; 
        transform: rotate(90deg);
    }

    .aumenta-vertical{
        transition: ease-out all;
        transition-timing-function: ease-in-out;            
        transition-duration: 4s;
        width: 100%;            
        transform: rotate(90deg);
    }
</style>

<script type="text/javascript">
    //ao terminar de carregar a pagina da o efeito, mas no jsfiddle nao
    //da pra visualizar, porque usa ajax, então a página já foi carregada
    $(document).ready(function(){        
        $('#linha').addClass('aumenta-vertical');
        $('#linha2').addClass('aumenta-vertical');
    });
</script>