How to make a line increase height automatically css javascript jquery

Question

How to make a line increase height automatically css javascript jquery

Navigation

#1 by (1 votes)

0

Good night, people I have the following problem, in the layout that I'm putting together has several lines in different places during the course of the page, the client wants these lines to appear and grow from different directions, initially I made one of these lines using the html5 "progress", however I can only do this when it is to increase the width, when the line is vertical I have problems, I tried to use the transform rotate but it was not good because even using the rotate it still occupies the size on the screen, finally I wanted other ways to make this line increase, that is malleable so much I can increase the width as well as the height without harming the layout, I am 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);
}

javascript html5 progress-bar height

asked by anonymous 08.09.2017 / 00:50

1 answer

Save image to database and give restore in database with PostgreSQL What error is this "D / TAG: Return ...: [Lcom.example.gastevo.domanda.ConsultarPojo; @ 11c78941"

score 1 · Accepted Answer

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