<style>

    #div1{width: 500px;height: 20px;border: 1px solid gray;}

    #div2{height: 20px;width: 0px;background:green;}

</style>

　      
  　　<div id="div1">

            <div id="div2"></div>

        </div>

        <span id="span1"></span>

        <input type="button" value="start" id="btnone">

        <input type="button" value="end" id="btnend">

<script>

    var n=0

        function move(){

                  n++;

        div2.style.width=n+"px";

                if(n==500){

                    clearInterval(timer);

                }

                if (n>500) {

                        n=0;

                    }

        span1.innerHTML = (n/500*100).toFixed(2)+"%"

        };

        var timer;

        btnone.onclick = function(){

        clearInterval(timer);

         timer = setInterval(move,50);

        }

        btnend.onclick = function(){

            clearInterval(timer);

        }

</scirpt>