Home/ Questions/Q 7706129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:02:30+00:00

I am trying to build a progression bar that is linked with a timer.

  • 0

I am trying to build a progression bar that is linked with a timer. For instance each second will add 1% to the width of the bar.
For now I am getting to the part where I can click a button and it start progressing, but this is purely arbitrary. How can I get some kind of infinite loop with jQuery to update the bar after each second?
Another question maybe more basic? How can I use the button to stop the progression of the bar?

Two questions

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fancy Timer </title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="javascript/jquery-1.7.2.js"></script>  
</head>



<body>


<script type="text/javascript">
$(document).ready( function ( $ ) {
    last=$('ul.events li:last div').css('border', '1px solid red');


    function foo(e) {
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
    };

    $("#timer").bind({
      'click': foo,
    });




})


</script>


<div id="wrapper">
<a href="#" id="timer">START</a>

    <ul class="events">
        <!-- <li style="width: 42.48%; left: 57.2%;">Design &amp; Typography <em>(2007 - 2009)</em></li> -->
        <li><div class="bar" style="width: 30%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div> </li>
        <li><div class="bar" style="width: 55%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
        <li><div class="bar" style="width: 45%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
        <li><div class="bar" style="width: 10%; left: 0;">Drawing </div></li>
    </ul> <!-- end .events -->
</div>



</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sounds like you’re looking for setInterval.

    var timerId = setInterval(function() {
    // code you want to execute every second here
}, 1000);
// 1 second = 1000 milliseconds.

    Then when you no longer want the code to run every second, you can do:

    clearInterval(timerId);
    • 0