
Barra de progreso y texto en movimiento
Publicado por Pablo (4 intervenciones) el 18/02/2016 13:02:40
Buenas,
he realizado una barra de progreso en Html5:
El problema es que estoy intentando hacer que, a la vez que la barra va progresando, unos textos debajo, como en una tabla, parezca que están en movimiento, es decir, que van rápidamente moviéndose. Como aparece cuando en algunos anuncios de publicidad de antivirus van apareciendo rápidamente los supuestos virus que tiene el pc.
Un saludo!!!
he realizado una barra de progreso en Html5:
1
2
3
4
5
6
7
8
<div class="bar">
<progress id="progressbar" class="progressbarra" value="0" max="100"></progress>
<span class="progress-value">0%</span>
<div class="link-bar">
<a href="#" id="button" class="button">Button</a>
<a class="text-button" href="#">Click r</a>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
document.getElementById("button").style.display='block';
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
El problema es que estoy intentando hacer que, a la vez que la barra va progresando, unos textos debajo, como en una tabla, parezca que están en movimiento, es decir, que van rápidamente moviéndose. Como aparece cuando en algunos anuncios de publicidad de antivirus van apareciendo rápidamente los supuestos virus que tiene el pc.
Un saludo!!!
Valora esta pregunta


0