Looping javascript function

Question

I have a script that creates a progress bar and is style with CSS. It works great, but once the bar reaches the end, it stops and I can not get the script to loop so that it starts again. How can I loop this script so that the progress bar starts over once it reaches the end?

<script type="text/javascript">
$(document).ready(function() {
var el = $(''#progress'');
el.animate({
width: "100%"
}, 40000);
});
</script>


<style>
#progressKeeper {background:#f2f2f2;display:none;width: 400px;height: 18px;border: 1px         solid #CCC;-moz-border-radius:7px; border-radius:7px;color:#f2f2f2;font-family:Arial;font-    weight:bold;font-style:italic;font-size:.9em;margin-bottom:2000px;}
#progress {background: #005c9e;width: 0;height: 17px;-moz-border-radius:7px; border-    radius:7px;}
</style>

One thing that I would try is to wrap the script in a function, and then loop with a certain condition like: for (var i=0; i < progressCount; i++) { showProgressBar(); } You may want to wrap the whole thing in other function... — Guillermo
– Guillermo, Commented Sep 25, 2013 at 14:12

Niet the Dark Absol · Accepted Answer · 2013-09-25 14:12:38Z

3

Drop the jQuery, use CSS3!

#progress {
    animation:progress 40s linear infinite;
    -webkit-animation:progress 40s linear infinite;
}

@keyframes progress {from {width:0} to {width:100%}}
@-webkit-keyframes progress {from {width:0} to {width:100%}}

If you must support outdated browsers... well, pass a callback to the animate function to tell it to start the animation again. Something like this:

$(function() {
    var prog = $("#progress");
    anim();
    function anim() {
        prog.css({width:0});
        prog.animate({width:"100%"},40000,anim);
    }
});

answered Sep 25, 2013 at 14:12

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiruse · Accepted Answer · 2013-09-25 14:12:07Z

2

Make it a function and pass that function to your .animate call as completion handler. See jQuery().animate().

Something like:

$(document).ready(function() {
    function animateProgressBar( ) {
        $('#progress').width(0).animate({
            width : "100%"
        }, 40000, animateProgressBar);
    }

    animateProgressBar();
});

(Untested)

answered Sep 25, 2013 at 14:12

Kiruse

1,7431 gold badge13 silver badges23 bronze badges

Collectives™ on Stack Overflow

Looping javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related