1

Eu tenho esta barra de progresso e preciso de enviar via javascript :

document.querySelector('#progress').style.width = 10%;

o valor para o css animar :

@-moz-keyframes progress { 
    from { }

    to { width: 80% }
}

mas não consigo modificar o valor ...

document.querySelector('#progress').style.width = 10%; 
#progress {
    background: #A1C969; /*-- Color of the bar --*/
    height: 15px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
}

#pbaranim {
    height: 15px;
    width: 100%;
    overflow: hidden;
    background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    filter: alpha(opacity=25);
}

@-webkit-keyframes progress { 
    from { }

    to { width: 80% }
}

@-moz-keyframes progress { 
    from { }

    to { width: 80% }
}

@-ms-keyframes progress { 
    from { }

    to { width: 80% }
}

@keyframes progress { 
    from { }

    to { width: 36% }
}
<div id="progressbar" style="width:100%; height:50px; border:1px solid gray;">
  <div id="progress" style="width:0%; 
       background:red;
       height:20px;">
  </div>
</div>

1 Resposta 1

1

se você precisa modificar manualmente o valor da barra, então te aconselho a utilizar transition ao invés de animation:

var valor = document.querySelector(".valor");
window.setTimeout(function () {
  valor.style.width = "80%";
  
  window.setTimeout(function () {
    valor.style.width = "10%";
  }, 2000);
}, 50);
.progress {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  height: 50px;
  width: 360px;
  padding: 5px;
  border: 5px solid gainsboro;
  box-shadow: inset 0px 0px 5px black, 0px 0px 5px black;
  box-sizing: border-box;
}

.valor {
  height: 100%; 
  width: 0%;
  transition: width 1s linear;  
  background-color: steelblue;
}
<div class="progress">
  <div class="valor">
  </div>
</div>

2
  • Muito obrigado , sabes como posso dentro do JS passar o valor da variavel par a o style ? tipo valor.style.width = var bar_percent;
    – I-am Sam
    Commented 28/01/2016 às 15:24
  • ok ja consegue valor.style.width = bar_percent + "%"; OBr
    – I-am Sam
    Commented 28/01/2016 às 15:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .