Geek Answers Handbook

Make progress bar download images using bootstrap / jquery

I am trying to make a progress bar with css loading when loading images. For this, I use the following script:

<html> <head> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> <script type="text/javascript"> var n=0; var c=0; $('img').each(function() { n++; var tmpImg = new Image() ; tmpImg.src = $(this).attr('src') ; tmpImg.onload = function() { c++; }; }); var interval = setInterval(function() { percent = n/100; loaded = c/percent; // for displaying purposes setBar(getBar()+50) // feed loaded var to the progressbar if (loaded == 100) { clearInterval(interval); } }, 1); function setBar(n) { var bar = document.getElementById('fabbar'); bar.style.width = n+'%'; } function getBar() { var bar = document.getElementById('fabbar'); return parseInt(bar.style.width); } </script> </head> <body> <div class="progress progress-info progress-striped active"> <div class="bar" id='fabbar' style="width: 20%"></div> </div>

But this does not work, i.e. progress bar is not progressing. How can i do this?

+4
source share
1 answer

Try ( demo ):

 $(function () { var n = 0, $imgs = $('img'), val = 100 / $imgs.length, $bar = $('#fabbar'); $imgs.load(function () { n = n + val; // for displaying purposes $bar.width(n + '%').text(n + '%'); }); });
+5
source

More articles:


All Articles