I have this progress bar and need to send via javascript:
document.querySelector('#progress').style.width = 10%;
value for css animate:
@-moz-keyframes progress {
from { }
to { width: 80% }
}
but I can not change the value ...
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>