CODEWITHSUNDEEP
javascriptjquery
Rune Laenen
Rune Laenen

Reputation: 13

Make a bar being full every 15 seconds

I was trying to make a sort of loading bar, I've made this but it won't work... Who can help me??

<div id="loader" style="height: 2px; width: 0px; background: green;">
Test
</div>
<script>
$('#loader').animate({width:'100px'}, 15000);
</script>

Thank you!

Edit: This one's working

<div id="loader" style="height: 2px; width: 0px; background: green;">
</div>
<script>
$(document).ready(function(){
    function loader(){$('#loader').animate({width:'0px'}, 1).animate({width:'468px'}, 15000, function() {loader()});}
    loader();
});

</script>

Thanks to Pahnin

Upvotes: 1

Views: 113

Answers (3)

pahnin
pahnin

Reputation: 5588

http://jsfiddle.net/pahnin/d7hWD/1/

Start the animation after document is loaded

$(document).ready(function(){
$('#loader').animate({width:'100px'}, 15000);
});

Edit:

 $(document).ready(function() {
     // jQuery
 });

The above function is used to run your jQuery code after all the dom elements are loaded, this includes libraries like jQuery too.

Upvotes: 3

eruducer
eruducer

Reputation: 31

do you mean like :

function startLoad(){
  $('#loader').animate({width:'100px'}, 15000);
  setTimeout(function(){
    $('#loader').css({'width':'0'});
    startLoad();
  }, 15000);
}
$(document).ready(startLoad);

Upvotes: 0

Alex Peattie
Alex Peattie

Reputation: 27697

It works for me:

http://jsfiddle.net/SJVtr/

Are you sure you're loading including jQuery correctly?:

Upvotes: 1

Related Questions