JQuery - Barra de progreso y texto en movimiento

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Barra de progreso y texto en movimiento

Publicado por xve (557 intervenciones) el 18/02/2016 19:44:42
Hola Pablo, he intentado ejecutar tu código, y me da error en la linea 4, indicando que la variable Moderniz no esta definida.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Barra de progreso y texto en movimiento

Publicado por Octavio (7 intervenciones) el 18/02/2016 19:47:42
Si te he entendido bien, creo que lo que buscas es algo así.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
 
				var progressbar = $('#progressbar'),
					max = progressbar.attr('max'),
					time = (1000/max)*5,
				    value = progressbar.val(),
					textVal = [ 'Un mensaje', 'Otro mensaje', 'Un mensaje mas', 'Este es el último, empezamos otra vez' ],
					count = 0;
 
				var loading = function() {
				    value += 1;
				    addValue = progressbar.val(value);
 
			        $('.progress-value').html(value + '%');
 
			        if (value == max) {
			            clearInterval(animate);
			            document.getElementById("button").style.display='block';
			        }
 
 
			        $('#progress-text').text(textVal[count]);
			        count === 3 ? count = 0 : count++;
			    };
 
			    var animate = setInterval(function() {
			        loading();
			    }, time);
 
		});
	</script>
</head>
<body>
	<div class="bar">
		<progress id="progressbar" class="progressbarra" value="0" max="100"></progress>
		<span class="progress-value">0%</span>
 
		<br />
 
		<div id="progress-text"></div>
 
		<div class="link-bar">
			<a href="#" id="button" class="button">Button</a>
			<a class="text-button" href="#">Click r</a>
		</div>
	</div>
</body>
</html>

Como te han dicho por ahí, te falla una línea. Quité la condición para poder ejecutar el código, para que lo tengas en cuenta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar