Estoy intentando implementar una barra de progreso, la idea es meterla en la columna de un grid donde se muestra el avance de cierto proyecto.
La barra que quiero implementar, por el diseño que tiene aparece aqui:
http://davidwalsh.name/progress-bar-animated-mootools
No tengo mucha experiencia, y ni siquiera se si se pueda jeje.
El caso es que me tira un error en la primera linea del script:
Código:
Se que es muy aventurado preguntar algo asi XD .. pero no tengo mucho tiempo, disculpen ustedes.1 var dwProgressBar = new Class({
2
3
4 //implements
5 Implements: [Options],
6
7 //options
8 options: {
9 container: $$('body')[0],
10 boxID:'',
11 percentageID:'',
12 displayID:'',
13 startPercentage: 0,
14 displayText: false,
15 speed:10
16 },
17
18 //initialization
19 initialize: function(options) {
20 //set options
21 this.setOptions(options);
22 //create elements
23 this.createElements();
24 },
25
26 //creates the box and percentage elements
27 createElements: function() {
28 var box = new Element('div', { id:this.options.boxID });
29 var perc = new Element('div', { id:this.options.percentageID, 'style':'width:0px;' });
30 perc.inject(box);
31 box.inject(this.options.container);
32 if(this.options.displayText) {
33 var text = new Element('div', { id:this.options.displayID });
34 text.inject(this.options.container);
35 }
36 this.set(this.options.startPercentage);
37 },
38
39 //calculates width in pixels from percentage
40 calculate: function(percentage) {
41 return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
42 },
43
44 //animates the change in percentage
45 animate: function(to) {
46 $(this.options.percentageID).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())});
47 if(this.options.displayText) {
48 $(this.options.displayID).set('text', to.toInt() + '%');
49 }
50 },
51
52 //sets the percentage from its current state to desired percentage
53 set: function(to) {
54 this.animate(to);
55 }
56
57});
Saludos =)
