Width of progress bar incorrect (homework)


#1

I created an animated progress bar but it doesn't work as hoped for. I want 20% of the bar to show up but 100% of the bar shows up instead. It does however show the percentage correctly.

I link to jquery and modernizr.

Here is my 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);			           
		        }
		    };
		
		    var animate = setInterval(function() {
		        loading();
		    }, time);
		};	
	});

And here is my HTML:

<progress id="progressbar" value="0" max="20"></progress>
<span class="progress-value">20%</span>

#2

Please post a link to this exercise. Thanks.


#3

I want to have two progress bars but when I just duplicate the jquery code it doesn't work. How do I make two toolbars?


#4

I use this code for two progress bars but it doesn't work:

$(document).ready(function() {

  var progressbarB = $('#progressbar-2'),
    max = progressbarB.data('max'),
    time = (1000 / max) * 5,
    valueB = progressbarB.val();

  var loadingB = function() {
    valueB += 1;
    addValueB = progressbarB.val(valueB);

    $('.progress-value-2').html(valueB + '%');
    if (valueB == max) {
      clearInterval(animateB);
    }
  };

  var animateB = setInterval(function() {
    loadingB();
  }, time);

  var progressbar = $('#progressbar'),
    max = progressbar.data('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);
    }
  };

  var animate = setInterval(function() {
    loading();
  }, time);

});

#5

The HTML is:

<progress id="progressbar" value="0" max="100" data-max="20"></progress>

20%

	<progress id="progressbar-2" value="0" max="100" data-max="30"></progress>
	<span class="progress-value-2">30%</span>

#6

Repeat... Please post a link to this exercise. Thanks.


#7

The problem has been solved.


#8

Was this a lesson or your own project?


#9

It was a work assignment.


#10

This topic was automatically closed after 7 days. New replies are no longer allowed.