Javascript: to change class width from 0% to 100% and from 100% to 0% non stop

The code below changes the width of the "inner" class from 0% to 100%, so the bar is filled progressively with the green color. But this is incomplete because once the width is 100% I need it to go back to 0% and then to 100% and so on .. it will o开发者_运维百科nly stop going from 0% to 100% and from 100% to 0% when clicked.

I'll figure out how to add the clicking even but please help me achieve the non stop changing width.

Thanks a ton!

<style>


.bar {
  background-color: #191919;
  border-radius: 16px;
  padding: 4px;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 24px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}


.bar .inner {
  background: #999;
  display: block;
  position: absolute;
  overflow: hidden;
  max-width: 97.5% !important; 
  height: 24px;
  text-indent: -9999px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 
   inset 0 -1px 3px rgba(0, 0, 0, 0.4), 
   0 1px 1px #000;
  -webkit-transition: width 0.3s linear;
  -moz-transition: width 0.3s linear;
  transition: width 0.3s linear;
}


.green .inner { 
  background: #7EBD01;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
  background: -moz-linear-gradient(top, #7EBD01, #568201);
}
</style>


<script type="text/javascript">

    for (i=0;i<=100;i++){


         setTimeout(function(){
            document.querySelector('.green.bar .inner').style.width = i+'%';
        },0);

        }

</script>


<div class="green bar">
 <div class="inner" style="width:0%"></div>
</div>

Fiddle: http://jsfiddle.net/ZeYJy/
I have included two ways to implement my suggestion: The first bar immediately goes back to 0 after reaching 100, the second bar has a small delay.

Use the modulo operator % to reset the counter to zero at 100. See below:

<script>
window.onload = function(){
    var counter = 0;
    window.setInterval(function(){
        document.querySelector('.green.bar .inner').style.width =
                                                    (++counter % 101) + '%';
    }, 50);
}
</script>

This script adds an interval on load, which increase the width of the element. After the counter has reached 100, the width will be reset to zero.

Explanation of the code:

• var counter = 0 (inside a function, window.onload) - A local variable is defined and initialised at zero.
• window.setInterval(function(){ ... }, 50) - An interval is defined, activating the function (first argument) every 50 milliseconds (20x a second, adjust to your own wishes)
• (++counter % 101) - Increments the counter by one, modulo 101:
  The modulo operator calculates the remainder after division, ie: 0 % 101 = 0, 100 % 101 = 100 and 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100

Instead of setTimeout, use setInterval.

Each time the interval is fired, use a function to work out how much to fill the bar. Once it hits 100, reset it.

You can then clear the interval using clearInterval once the user has clicked.

This article shows how to repeat a CSS animation infinitely. This will be easier on your CPU than using Javascript:

http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html